<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
     虎虎生辉
  </title>
  
  <link rel="shortcut icon" href="/blog/favicon.ico" />
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
<script src="/blog/js/pace.min.js"></script>


  

  

<meta name="generator" content="Hexo 6.0.0"></head>

</html>

<body>
  <div id="app">
    <main class="content">
      
<section class="cover">
    
  <div class="cover-frame">
    <div class="bg-box">
      <img src="./images/tiger.jpg" alt="image frame" />
    </div>
    <div class="cover-inner text-center text-white">
      <h1><a href="/blog/">虎虎生辉</a></h1>
      <h2></h2>
      <div>
        
        <img
          src="./hu.png"
          class="cover-logo"
          alt="虎虎生辉"
        />
        
      </div>
    </div>
  </div>
  <div class="cover-learn-more">
    <a href="#main" class="anchor"><i class="ri-arrow-down-line"></i></a>
  </div>
</section>

<div id="main">
  <section class="outer">
  <article class="articles">
    
    <h1 class="page-type-title"></h1>

    
    
    <article id="post-HTML5a" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/03/01/HTML5a/"
    >HTML5 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/03/01/HTML5a/" class="article-date">
  <time datetime="2018-02-28T16:00:00.000Z" itemprop="datePublished">2018-03-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h3 id="1-概念"><a href="#1-概念" class="headerlink" title="1.概念"></a>1.概念</h3><ul>
<li>HTML (超文本标记语言——HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。</li>
<li>HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦,它定义了网页内容的含义和结构。</li>
<li>HTML（超文本标记语言——HyperText Markup Language）由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。</li>
</ul>
<h3 id="2-元素"><a href="#2-元素" class="headerlink" title="2.元素"></a>2.元素</h3>  <img src="./element.png">

<ul>
<li>开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。</li>
<li>结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。</li>
<li>内容（Content）：元素的内容，本例中就是所输入的文本本身。</li>
<li>元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。</li>
</ul>
<h3 id="3-文档"><a href="#3-文档" class="headerlink" title="3.文档"></a>3.文档</h3><h4 id="（1）文档声明"><a href="#（1）文档声明" class="headerlink" title="（1）文档声明"></a>（1）文档声明</h4>  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>告诉浏览器，这是HTML文档</li>
<li>如果不写，会导致浏览器渲染进入怪异模式 </li>
</ul>
<h4 id="（2）文档头"><a href="#（2）文档头" class="headerlink" title="（2）文档头"></a>（2）文档头</h4>  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 元数据 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;author&quot;</span> <span class="attr">content</span>=<span class="string">&quot;Chris Mills&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;description&quot;</span> <span class="attr">content</span>=<span class="string">&quot;......&quot;</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 标题 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- css --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;demo.css&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">      <span class="selector-tag">div</span>&#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 图标 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;icon&quot;</span> <span class="attr">href</span>=<span class="string">&quot;//mat1.gtimg.com/www/icon/favicon2.ico&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;shortcut icon&quot;</span> <span class="attr">href</span>=<span class="string">&quot;./favicon.ico&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- js --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;demo.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> a = <span class="number">10</span>;</span></span><br><span class="line"><span class="javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>文档头是包含在 &lt;head&gt; 元素里面的内容，head 里面的内容不会在浏览器中显示，它的作用是包含一些页面的元数据。</li>
<li>meta元素声明文档解析的字符编码格式、声明适配移动端的信息、声明IE浏览器的处理方式、作者、网站描述</li>
<li>title元素定义文档标题</li>
<li>style元素定义内部css样式表</li>
<li>link元素引入外部css样式表（也可用于引入网站图标）</li>
<li>script元素定义js脚本（也可用src属性引入外部js脚本）</li>
<li>增加自定义站点图标（如果你的网站使用了内容安全策略（Content Security Policy, CSP）来增加安全性，这个策略会应用在图标上。如果你遇到了图标没有被加载的问题，你需要确认认 Content-Security-Policy header的 img-src directive 没有禁止访问图标）。</li>
<li>许多 &lt;meta&gt; 特性已经不再使用。 例如，keyword &lt;meta&gt; 元素（&lt;meta name=”keywords” content=”fill, in, your, keywords, here” &gt;）— 提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站 — 已经被搜索引擎忽略了， 因为作弊者填充了大量关键词到 keyword， 错误地引导搜索结果。</li>
</ul>
<h4 id="（3）文档体"><a href="#（3）文档体" class="headerlink" title="（3）文档体"></a>（3）文档体</h4><ul>
<li>文档头是包含在 &lt;body&gt; 元素里面的内容，body 里面的内容会在浏览器中显示，所有展示给用户的内容结构均应写在文档体中。</li>
</ul>
<h3 id="4-块级与内联"><a href="#4-块级与内联" class="headerlink" title="4.块级与内联"></a>4.块级与内联</h3><ul>
<li>块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。</li>
<li>内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间。</li>
<li>HTML5 重新定义了元素的类别：<a target="_blank" rel="noopener" href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">HTML5 标准</a> 尽管这些新的定义更精确，但却比上述的 “块级元素” 和 “内联元素” 更难理解。</li>
<li>“块”和“内联”，不应该与 the types of CSS boxes 中的同名术语相混淆. 尽管他们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。</li>
</ul>
<h3 id="5-可替换与不可替换元素"><a href="#5-可替换与不可替换元素" class="headerlink" title="5.可替换与不可替换元素"></a>5.可替换与不可替换元素</h3><ul>
<li><strong>可替换元素</strong><ul>
<li>通常显示的内容取决于元素的属性</li>
<li>通常是行盒、通常有行块盒的特点、css不能完全控制其中的样式</li>
</ul>
</li>
<li><strong>不可替换元素</strong><ul>
<li>通常显示的内容取决于元素的内容</li>
</ul>
</li>
</ul>
<h3 id="6-元素嵌套关系"><a href="#6-元素嵌套关系" class="headerlink" title="6.元素嵌套关系"></a>6.元素嵌套关系</h3><ul>
<li><strong>旧观念：</strong>块级元素可以包含行级元素，反之不可，a元素除外</li>
<li><strong>HTML5：</strong>元素的包含关系由元素的内容类别决定<ul>
<li>容器元素中可以包含任何元素</li>
<li>a元素中几乎可以包含任何元素</li>
<li>某些元素有固定的子元素</li>
<li>标题与段落元素不能相互嵌套，并且不能包含容器元素</li>
</ul>
</li>
</ul>
<h3 id="7-结构与语义"><a href="#7-结构与语义" class="headerlink" title="7.结构与语义"></a>7.结构与语义</h3><h4 id="（1）为什么我们需要结构化"><a href="#（1）为什么我们需要结构化" class="headerlink" title="（1）为什么我们需要结构化?"></a>（1）为什么我们需要结构化?</h4><ul>
<li>用户在阅读网页时，往往会快速浏览以查找相关内容，经常只是阅读开头的标题（我们通常在一个网页上会花费很少的时间）如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。</li>
<li>对您的网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题，您的网页在SEO（搜索引擎优化）方面效果不佳。</li>
<li>严重视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做屏幕阅读器（screen reader）。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，它们通过朗读标题来提供文档的概述，让用户能快速找到他们需要的信息。如果标题不可用，用户将被迫听到整个文档的大声朗读。</li>
<li>使用CSS样式化内容，或者使用JavaScript做一些有趣的事情，你需要包含相关内容的元素，所以CSS / JavaScript可以有效地定位它。</li>
</ul>
<h4 id="（2）为什么我们需要语义？"><a href="#（2）为什么我们需要语义？" class="headerlink" title="（2）为什么我们需要语义？"></a>（2）为什么我们需要语义？</h4><ul>
<li>每个HTML元素都有具体的含义，元素的使用应根据内容的含义来选择，而不是显示出的样式。</li>
<li>使用的元素与显示效果无关，元素显示的效果应由CSS决定；浏览器带有默认的CSS样式，所以每个元素都带有一些默认样式。</li>
<li>为了搜索引擎的优化</li>
<li>为了浏览器理解网页</li>
</ul>
<h3 id="8-代码规范"><a href="#8-代码规范" class="headerlink" title="8.代码规范"></a>8.代码规范</h3><p>  <a target="_blank" rel="noopener" href="https://validator.w3.org/">在线验证</a></p>
<ul>
<li>语法错误：由于拼写错误导致程序无法运行，就像上面的 Rust 示例。通常熟悉语法并理解错误信息后很容易修复。</li>
<li>逻辑错误：不存在语法错误，但代码无法按预期运行。通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。</li>
</ul>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/03/01/HTML5a/" data-id="ckya9fc11000eygf66e2hfo6g"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/html-h5/" rel="tag">html h5</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-NETa" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/02/01/NETa/"
    >网络 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/02/01/NETa/" class="article-date">
  <time datetime="2018-01-31T16:00:00.000Z" itemprop="datePublished">2018-02-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="一、网络起源"><a href="#一、网络起源" class="headerlink" title="一、网络起源"></a>一、网络起源</h1><ul>
<li>起源于1969年，加利福尼亚大学洛杉矶分校+斯坦福大学+加利福尼亚大学+犹他州大学</li>
<li>互联网：internet（因特网、英特网）， 网际网路</li>
<li>1989年，欧洲物理研究所：协议（格式）</li>
<li>WWW（World Wide Web）：万维网</li>
</ul>
<h1 id="二、计算机之父（冯诺依曼）"><a href="#二、计算机之父（冯诺依曼）" class="headerlink" title="二、计算机之父（冯诺依曼）"></a>二、计算机之父（冯诺依曼）</h1><ul>
<li>运算器： CPU、GPU</li>
<li>存储器： 内存、硬盘</li>
<li>控制器： 主板</li>
<li>输入设备： 键盘、鼠标、麦克风、网口</li>
<li>输出设备： 显示器、耳机、网口</li>
</ul>
<h1 id="三、IP地址"><a href="#三、IP地址" class="headerlink" title="三、IP地址"></a>三、IP地址</h1><h3 id="1-局域网"><a href="#1-局域网" class="headerlink" title="1.局域网"></a>1.局域网</h3><h3 id="2-公网"><a href="#2-公网" class="headerlink" title="2.公网"></a>2.公网</h3><h3 id="3-路由器"><a href="#3-路由器" class="headerlink" title="3.路由器"></a>3.路由器</h3><h3 id="4-IP地址格式"><a href="#4-IP地址格式" class="headerlink" title="4.IP地址格式"></a>4.IP地址格式</h3><ul>
<li>四段：xxx.xxx.xxx.xxx 每个段0-255</li>
<li>五类：A-E类<ul>
<li>A类：0.0.0.0 - 127.255.255.255</li>
<li>B类：128.0.0.0 - 191.255.255.255</li>
<li>C类：192.0.0.0 - 223.255.255.255<h3 id="5-域名与DNS解析"><a href="#5-域名与DNS解析" class="headerlink" title="5.域名与DNS解析"></a>5.域名与DNS解析</h3>==当向浏览器地址栏中输入一个Url按回车后，网络中都会发生什么？==<br>（1）看浏览器的缓存<br>（2）看本机host（C:windows/system32/drivers/etc/host）</li>
</ul>
<ul>
<li>域名：localhost ==&gt;&gt; 127.0.0.1（本机）</li>
<li>域名：不认识 ==&gt;&gt; 0.0.0.0（默认打到本机）</li>
</ul>
</li>
</ul>
<p>（3）家里的路由器<br>（4）上级路由、城市路由LDNS服务器<br>（5）继续向上级的DNS服务器找、GDNS服务器</p>
<h1 id="四、网络模型"><a href="#四、网络模型" class="headerlink" title="四、网络模型"></a>四、网络模型</h1><h2 id="（一）分类"><a href="#（一）分类" class="headerlink" title="（一）分类"></a>（一）分类</h2><h3 id="1-物理层"><a href="#1-物理层" class="headerlink" title="1.物理层"></a>1.物理层</h3><ul>
<li>高/低电平（二进制）<h3 id="2-数据链路层"><a href="#2-数据链路层" class="headerlink" title="2.数据链路层"></a>2.数据链路层</h3></li>
<li>mac地址<h3 id="3-网络层"><a href="#3-网络层" class="headerlink" title="3.网络层"></a>3.网络层</h3></li>
<li>IP协议<h3 id="4-运输层"><a href="#4-运输层" class="headerlink" title="4.运输层"></a>4.运输层</h3></li>
<li>TCP协议</li>
<li>UDP协议<h3 id="5-应用层"><a href="#5-应用层" class="headerlink" title="5.应用层"></a>5.应用层</h3></li>
<li>DNS协议</li>
<li>HTTP协议</li>
</ul>
<h2 id="（二）HTTP协议"><a href="#（二）HTTP协议" class="headerlink" title="（二）HTTP协议"></a>（二）HTTP协议</h2><h3 id="1-请求Request"><a href="#1-请求Request" class="headerlink" title="1.请求Request"></a>1.请求Request</h3><ul>
<li>请求头</li>
<li>数据体</li>
<li>第一行：请求方式 URL 协议版本</li>
</ul>
<h4 id="1-GET请求"><a href="#1-GET请求" class="headerlink" title="1) GET请求"></a>1) GET请求</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">GET / HTTP/1.1</span><br><span class="line">Host: www.baidu.com</span><br><span class="line">Connection: keep-alive</span><br><span class="line">Upgrade-Insecure-Requests: 1</span><br><span class="line">User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36</span><br><span class="line">Sec-Fetch-Mode: navigate</span><br><span class="line">Sec-Fetch-User: ?1</span><br><span class="line">Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3</span><br><span class="line">Sec-Fetch-Site: none</span><br><span class="line">Accept-Encoding: gzip, deflate, br</span><br><span class="line">Accept-Language: zh-CN,zh;q=0.9</span><br><span class="line">Cookie: </span><br></pre></td></tr></table></figure>
<ul>
<li>GET /path?==数据信息== HTTP1.1</li>
<li>Host: <a target="_blank" rel="noopener" href="http://www.baidu.com/">www.baidu.com</a></li>
<li>Connection: keep-alive</li>
<li>User-Agent: </li>
</ul>
<h4 id="2-POST请求"><a href="#2-POST请求" class="headerlink" title="2) POST请求"></a>2) POST请求</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">:authority: ratewrite.tmall.com</span><br><span class="line">:method: POST</span><br><span class="line">:path: /rateWriteResult.htm</span><br><span class="line">:scheme: https</span><br><span class="line">accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3</span><br><span class="line">accept-encoding: gzip, deflate, br</span><br><span class="line">accept-language: zh-CN,zh;q=0.9</span><br><span class="line">cache-control: max-age=0</span><br><span class="line">content-length: 2351</span><br><span class="line">content-type: application/x-www-form-urlencoded</span><br><span class="line">cookie: </span><br><span class="line">origin: https://ratewrite.tmall.com</span><br><span class="line">referer: https://ratewrite.tmall.com/rate_detail.htm?trade_id=697224451467453543</span><br><span class="line">sec-fetch-mode: nested-navigate</span><br><span class="line">sec-fetch-site: same-origin</span><br><span class="line">sec-fetch-user: ?1</span><br><span class="line">upgrade-insecure-requests: 1</span><br><span class="line">user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36</span><br><span class="line"></span><br><span class="line">callback: RateWriteCallback401</span><br><span class="line">qualityContent697224451467453543: 效果并没有描述那么好，功能也是</span><br><span class="line">serviceContent697224451467453543: 服务不错</span><br></pre></td></tr></table></figure>
<ul>
<li>POST /path HTTP1.1</li>
<li>Host: <a target="_blank" rel="noopener" href="http://www.baidu.com/">www.baidu.com</a></li>
<li>Connection: keep-alive</li>
<li>User-Agent: </li>
<li></li>
<li>==数据信息==</li>
</ul>
<h3 id="2-响应Response"><a href="#2-响应Response" class="headerlink" title="2.响应Response"></a>2.响应Response</h3><ul>
<li>响应头</li>
<li>数据体</li>
<li>第一行：协议版本 状态码 massage</li>
</ul>
<h3 id="3-GET-与-POST的区别？"><a href="#3-GET-与-POST的区别？" class="headerlink" title="3.GET 与 POST的区别？"></a>3.GET 与 POST的区别？</h3><ul>
<li>没有基于什么前提，不使用任何规范，只考虑语法和理论上的HTTP协议：没有区别，只是名字不一样</li>
<li>基于RFC规范：<ul>
<li>理论上： GET和POST具有相同的语法，不同的语义，GET用于获取数据，POST用于发送数据</li>
<li>实现上：各浏览器是规范的实现者，才有常见的不同<ul>
<li>GET的数据在url中可见（url不一定显示在地址栏中），POST请求不显示在url中</li>
<li>GET对数据长度有限制，POST对数据长度没有限制</li>
<li>GET请求的数据可以收藏为书签，POST不可收藏为书签</li>
<li>GET请求的后、按后退按钮、刷新按钮无影响，POST则会被重新提交</li>
<li>GET编码类型：application/x-www-form-url,POST编码类型有很多种</li>
<li>GET只允许ASCII，POST没有编码限制、允许发送二进制数据</li>
<li>GET历史参数会被保留在浏览器里，POST不会存在浏览器中</li>
<li>GET与POST相比，安全性较差，应为数据会展示在url中</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h1 id="五、浏览器缓存"><a href="#五、浏览器缓存" class="headerlink" title="五、浏览器缓存"></a>五、浏览器缓存</h1><h2 id="（一）Cookies"><a href="#（一）Cookies" class="headerlink" title="（一）Cookies"></a>（一）Cookies</h2><h3 id="1-特点"><a href="#1-特点" class="headerlink" title="1.特点"></a>1.特点</h3><ul>
<li>Cookie是有限制的</li>
<li>Cookie是存在浏览器里的，不是存在某个页面上</li>
<li>Cookie是可以长期存储的</li>
<li>Cookie是存在不同域名下的<h3 id="2-缺陷"><a href="#2-缺陷" class="headerlink" title="2.缺陷"></a>2.缺陷</h3></li>
<li>浏览器里的Cookie容易被复制，不安全</li>
</ul>
<h2 id="（二）Session"><a href="#（二）Session" class="headerlink" title="（二）Session"></a>（二）Session</h2><h3 id="1-特点-1"><a href="#1-特点-1" class="headerlink" title="1.特点"></a>1.特点</h3><ul>
<li>Session是存在服务器里的</li>
<li>服务器里的Session相对安全</li>
</ul>
<h3 id="2-缺陷-1"><a href="#2-缺陷-1" class="headerlink" title="2.缺陷"></a>2.缺陷</h3><ul>
<li>用户量比较大的话，服务器很耗费资源</li>
<li>服务器不止一台，Session一般只会存在某台服务器上，反向代理需要轮询</li>
</ul>
<h1 id="六、本地服务器"><a href="#六、本地服务器" class="headerlink" title="六、本地服务器"></a>六、本地服务器</h1><h2 id="（一）结构"><a href="#（一）结构" class="headerlink" title="（一）结构"></a>（一）结构</h2><h3 id="1-CS结构"><a href="#1-CS结构" class="headerlink" title="1.CS结构"></a>1.CS结构</h3><ul>
<li>（Client负责展示内容，Server负责提供内容）<h3 id="2-BS结构"><a href="#2-BS结构" class="headerlink" title="2.BS结构"></a>2.BS结构</h3></li>
<li>（Browser负责展示内容，Server负责提供内容）</li>
<li>页面的本质就是一个带有HTML格式的字符串</li>
</ul>
<h2 id="（二）服务器"><a href="#（二）服务器" class="headerlink" title="（二）服务器"></a>（二）服务器</h2><ul>
<li>严格的说，服务器是一台计算机， 这台计算机只提供服务（不是用户用的）</li>
<li>常说的服务器是服务容器（一个程序），不是服务器<ul>
<li>程序可以监听一个端口</li>
<li>读取文件并且返回</li>
</ul>
</li>
</ul>
<h1 id="七、网络请求"><a href="#七、网络请求" class="headerlink" title="七、网络请求"></a>七、网络请求</h1><h2 id="（一）发送请求的方式"><a href="#（一）发送请求的方式" class="headerlink" title="（一）发送请求的方式"></a>（一）发送请求的方式</h2><ul>
<li>地址栏输入网址url;（==无法用代码控制==）</li>
<li>location.href = “url”; 可以发出网络请求，但页面会发生跳转（==页面会跳转==）</li>
<li>带有src属性的标签，可以发送请求，服务端是可以处理的，返回的数据能否应用，取决于浏览器（==页面无法处理数据==）</li>
<li>带有href属性的标签，可以发送请求，服务端是可以处理的，返回的数据能否应用，取决于浏览器（==页面无法处理数据==）</li>
<li>带有action属性的标签，可以发出网络请求，但页面会发生跳转（==页面会跳转==）</li>
<li><strong>ajax请求</strong></li>
</ul>
<h2 id="（二）Ajax"><a href="#（二）Ajax" class="headerlink" title="（二）Ajax"></a>（二）Ajax</h2><ul>
<li>请求方式</li>
<li>请求地址url</li>
<li>数据<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="built_in">window</span>.XMLHttpRequest ? <span class="keyword">new</span> XMLHttpRequest() : <span class="keyword">new</span> ActiveObject(<span class="string">&quot;Microsoft.XMLHttp&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(xhr.readyState); <span class="comment">//0</span></span><br><span class="line">xhr.open(<span class="string">&quot;GET&quot;</span>, <span class="string">&quot;http://developer.duyiedu.com/edu/testAjaxCrossOrigin&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(xhr.readyState); <span class="comment">//1</span></span><br><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(xhr.readyState); <span class="comment">//2 3 4</span></span><br><span class="line">  <span class="keyword">if</span> (xhr.readyState === <span class="number">4</span> &amp;&amp; xhr.status === <span class="number">200</span>) &#123;</span><br><span class="line">    oP.innerText = <span class="built_in">JSON</span>.parse(xhr.responseText).msg; <span class="comment">//数据</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">xhr.send();</span><br></pre></td></tr></table></figure></li>
<li>==先绑定事件，再发送==</li>
<li>open(type, url, sync, )<ul>
<li>type请求方式</li>
<li>url请求地址</li>
<li>sync默认true异步</li>
</ul>
</li>
</ul>
<h2 id="（三）跨域"><a href="#（三）跨域" class="headerlink" title="（三）跨域"></a>（三）跨域</h2><h3 id="1-哪些资源允许跨域请求？"><a href="#1-哪些资源允许跨域请求？" class="headerlink" title="1.哪些资源允许跨域请求？"></a>1.哪些资源允许跨域请求？</h3><ul>
<li>js、css、图片</li>
<li>src属性的资源</li>
<li>href属性的大部分资源</li>
</ul>
<h3 id="2-哪些资源不允许跨域请求？"><a href="#2-哪些资源不允许跨域请求？" class="headerlink" title="2.哪些资源不允许跨域请求？"></a>2.哪些资源不允许跨域请求？</h3><ul>
<li>后端接口的数据</li>
<li>其它域的Cookie</li>
<li>其它域的缓存</li>
</ul>
<h3 id="3-怎么样算跨域？"><a href="#3-怎么样算跨域？" class="headerlink" title="3.怎么样算跨域？"></a>3.怎么样算跨域？</h3><ul>
<li>页面本身：有协议、域名、端口（默认端口号80）</li>
<li>请求数据：<a target="_blank" rel="noopener" href="http://www.baidu.com/">http://www.baidu.com:80</a></li>
<li>协议、域名、端口有任何一个不一样就算跨域</li>
</ul>
<h3 id="4-跨域发生在哪个阶段？"><a href="#4-跨域发生在哪个阶段？" class="headerlink" title="4.跨域发生在哪个阶段？"></a>4.跨域发生在哪个阶段？</h3><ul>
<li>即使跨域了，请求也可以发出的</li>
<li>服务器可以正常接收的</li>
<li>服务器可以正常处理的</li>
<li>服务器可以正常返回数据的</li>
<li>浏览器可以正常接收数据的</li>
<li>我们的代码在等待结果，当应为浏览器判定跨域了，不会把结果传递给代码</li>
</ul>
<h3 id="5-虽然跨域了，我们依然需要这个数据怎么办？"><a href="#5-虽然跨域了，我们依然需要这个数据怎么办？" class="headerlink" title="5.虽然跨域了，我们依然需要这个数据怎么办？"></a>5.虽然跨域了，我们依然需要这个数据怎么办？</h3><h4 id="1）-后端配合进行跨域"><a href="#1）-后端配合进行跨域" class="headerlink" title="1） 后端配合进行跨域"></a>1） 后端配合进行跨域</h4><ul>
<li>JSONP（JSON格式的数据）</li>
<li>后端设置Access-Control-Allow-Origin属性支持跨域</li>
</ul>
<h4 id="2）-后端不配合进行跨域"><a href="#2）-后端不配合进行跨域" class="headerlink" title="2） 后端不配合进行跨域"></a>2） 后端不配合进行跨域</h4><ul>
<li>iframe（只能显示，不能控制）</li>
<li>通过自己的后端代理</li>
</ul>
<h3 id="6-JSONP跨域"><a href="#6-JSONP跨域" class="headerlink" title="6.JSONP跨域"></a>6.JSONP跨域</h3><ul>
<li>只能使用GET方式（jQuery中使用POST会自动转为GET）</li>
<li>jQuery有判断是否同源的机制，如果同源则正常发送ajax，如果不同源则使用GET方式</li>
<li>src属性的资源不受跨域限制</li>
<li>script标签请求的资源会当做js代码执行</li>
<li><strong>jQuery中JSONP原理</strong><ul>
<li>判断请求与当前页面是否同源，如果同源则正常发送ajax，就不存在跨域</li>
<li>如果不同源，则生成一个script标签</li>
<li>生成一个随机的callback名字</li>
<li>设置script标签的src设置为请求的接口</li>
<li>将callback作为参数拼接在url后面</li>
<li>后端接收到请求后，开始准备要返回的数据</li>
<li>后端拼接数据</li>
<li>将内容返回</li>
<li>浏览器接收到内容当做js代码执行</li>
<li>相当于执行了callback将数据作为参数传递了进去<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myJSONP</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> url = obj.url.toLowerCase();</span><br><span class="line">  <span class="keyword">var</span> type = obj.type.toLowerCase();</span><br><span class="line">  <span class="keyword">var</span> dataType = obj.dataType.toLowerCase();</span><br><span class="line">  <span class="comment">//判断是否同源</span></span><br><span class="line">  <span class="keyword">var</span> targetProtocol = <span class="string">&quot;&quot;</span>;<span class="comment">//协议</span></span><br><span class="line">  <span class="keyword">var</span> targetHost = <span class="string">&quot;&quot;</span>;<span class="comment">//域名与端口</span></span><br><span class="line">  <span class="comment">//判断请求是绝对路径还是相对路径，如果是相对路径则一定是同源</span></span><br><span class="line">  <span class="keyword">if</span>(url.includes(<span class="string">&quot;http://&quot;</span>) || url.includes(<span class="string">&quot;https://&quot;</span>))&#123;</span><br><span class="line">    <span class="keyword">var</span> targetUrl = <span class="keyword">new</span> URL(url);</span><br><span class="line">    targetProtocol = targetUrl.protocol;</span><br><span class="line">    targetHost = targetUrl.host;</span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    targetProtocol = location.protocol;</span><br><span class="line">    targetHost = location.host;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//判断是否为jsonp, 如果不是则正常发送ajax</span></span><br><span class="line">  <span class="keyword">if</span>(dataType === <span class="string">&quot;jsonp&quot;</span>)&#123;</span><br><span class="line">    <span class="comment">//判断是否同源，如果同源就不用跨域</span></span><br><span class="line">    <span class="keyword">if</span>(location.protocol === targetProtocol &amp;&amp; location.host === targetHost)&#123;</span><br><span class="line">      <span class="comment">//正常ajax请求</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      <span class="comment">//jsonp跨域</span></span><br><span class="line">      <span class="comment">//生成一个script标签</span></span><br><span class="line">      <span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">&quot;script&quot;</span>);</span><br><span class="line">      <span class="comment">//生成一个随机的callback名</span></span><br><span class="line">      <span class="keyword">var</span> callback = <span class="string">&quot;cb&quot;</span> + <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*<span class="number">1000000</span>);</span><br><span class="line">      <span class="built_in">window</span>[callback] = obj.success;</span><br><span class="line">      <span class="comment">//设置script标签的src属性为请求的接口</span></span><br><span class="line">      <span class="keyword">if</span>(url.includes(<span class="string">&quot;?&quot;</span>))&#123;</span><br><span class="line">        script.src = url + <span class="string">&quot;&amp;callback=&quot;</span> + callback;</span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        script.src = url + <span class="string">&quot;?callback=&quot;</span> + callback;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="built_in">document</span>.head.appendChild(script);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">myJSONP(&#123;</span><br><span class="line">  <span class="attr">url</span>: <span class="string">&quot;http://developer.duyiedu.com/edu/testJsonp&quot;</span>,</span><br><span class="line">  <span class="attr">type</span>: <span class="string">&quot;get&quot;</span>,</span><br><span class="line">  <span class="attr">dataType</span>: <span class="string">&quot;jsonp&quot;</span>,</span><br><span class="line">  <span class="attr">success</span>: <span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(data)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/02/01/NETa/" data-id="ckya9fc15000nygf6811why37"
        class="article-share-link">分享</a>
      
    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-JQUERYa-0" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/01/01/JQUERYa-0/"
    >jQuery 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/01/01/JQUERYa-0/" class="article-date">
  <time datetime="2017-12-31T16:00:00.000Z" itemprop="datePublished">2018-01-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="一、"><a href="#一、" class="headerlink" title="一、$()"></a>一、$()</h1><h3 id="1-css-selector"><a href="#1-css-selector" class="headerlink" title="1.$(css selector)"></a>1.$(css selector)</h3><ul>
<li>字符串</li>
<li>css 选择器</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&quot;.wrapper ul li&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="2-jQuery-selector"><a href="#2-jQuery-selector" class="headerlink" title="2.$(jQuery selector)"></a>2.$(jQuery selector)</h3><ul>
<li>字符串</li>
<li>jQuery 特有选择器</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&quot;.wrapper ul li.eq(-1)&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="3-data"><a href="#3-data" class="headerlink" title="3.$(data)"></a>3.$(data)</h3><ul>
<li>任意形式的数据</li>
<li>容错</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="literal">undefined</span>);</span><br><span class="line">$(<span class="literal">null</span>);</span><br><span class="line">$(<span class="string">&quot;&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="4-DOM"><a href="#4-DOM" class="headerlink" title="4.$(DOM)"></a>4.$(DOM)</h3><ul>
<li>原生 dom</li>
<li>包装</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">this</span>);</span><br><span class="line">$(div);</span><br></pre></td></tr></table></figure>

<h3 id="5-fn"><a href="#5-fn" class="headerlink" title="5.$(fn)"></a>5.$(fn)</h3><ul>
<li>函数</li>
<li>DOMContentLoaded 事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).read(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;);</span><br><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="6-selectorSon-selectorFather"><a href="#6-selectorSon-selectorFather" class="headerlink" title="6.$(selectorSon, selectorFather)"></a>6.$(selectorSon, selectorFather)</h3><ul>
<li>限制选择</li>
<li>选择上下文</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&quot;.wrapper ul&quot;</span>);</span><br><span class="line">$(<span class="string">&quot;ul&quot;</span>, <span class="string">&quot;.wrapper&quot;</span>);</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="二、选择"><a href="#二、选择" class="headerlink" title="二、选择"></a>二、选择</h1><h2 id="（一）选择器"><a href="#（一）选择器" class="headerlink" title="（一）选择器"></a>（一）选择器</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$(“*“)</td>
<td align="left">所有元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“#lastname”)</td>
<td align="left">id=”lastname” 的元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“p”)</td>
<td align="left">所有 &lt;p&gt; 元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“p:first”)</td>
<td align="left">第一个 &lt;p&gt; 元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“p:last”)</td>
<td align="left">最后一个 &lt;p&gt; 元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“tr:even”)</td>
<td align="left">所有偶数 &lt;tr&gt; 元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“tr:odd”)</td>
<td align="left">所有奇数 &lt;tr&gt; 元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“ul li:eq(3)”)</td>
<td align="left">列表中的第四个元素（index 从 0 开始）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“ul li:gt(3)”)</td>
<td align="left">列出 index 大于 3 的元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“ul li:lt(3)”)</td>
<td align="left">列出 index 小于 3 的元素</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<h2 id="（二）筛选器"><a href="#（二）筛选器" class="headerlink" title="（二）筛选器"></a>（二）筛选器</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().get(index)</td>
<td align="left">第 index 元素（正数、负数、空）</td>
<td align="center">原生 DOM</td>
</tr>
<tr>
<td align="left">$().eq(index)</td>
<td align="left">第 index 元素（正数、负数、空）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().find(selector)</td>
<td align="left">限定选择</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().filter(selector)</td>
<td align="left">过滤选择(fn/true)</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().not(selector)</td>
<td align="left">过滤选择(fn/false)</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“li”).has(“p”)</td>
<td align="left">选中后代中包含 P 元素的 li 元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“.demo”).is(“p”)</td>
<td align="left">所有 class=”demo”的元素中是否有 p 元素</td>
<td align="center">boolean</td>
</tr>
</tbody></table>
<h2 id="（三）集合与回退"><a href="#（三）集合与回退" class="headerlink" title="（三）集合与回退"></a>（三）集合与回退</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().add(selector)</td>
<td align="left">集合</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().end()</td>
<td align="left">回退</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<hr>
<h1 id="三、操作"><a href="#三、操作" class="headerlink" title="三、操作"></a>三、操作</h1><h2 id="（一）操作内容"><a href="#（一）操作内容" class="headerlink" title="（一）操作内容"></a>（一）操作内容</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().html(string | ==fn==)</td>
<td align="left">HTML 内容(==特殊：只取第一个，设置全部==)</td>
<td align="center">string</td>
</tr>
<tr>
<td align="left">$().text(string | ==fn==)</td>
<td align="left">文本内容(==取全部，设置全部==)</td>
<td align="center">string</td>
</tr>
<tr>
<td align="left">$().val(string | ==fn==)</td>
<td align="left">表单内容(==特殊：只取第一个，设置全部==）</td>
<td align="center">string</td>
</tr>
</tbody></table>
<h2 id="（二）操作样式"><a href="#（二）操作样式" class="headerlink" title="（二）操作样式"></a>（二）操作样式</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().css(obj)</td>
<td align="left">获取或设置 css 样式（==可计算==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().addClass(string | ==fn==)</td>
<td align="left">添加一个或多个 class</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().removeClass(string | ==fn==)</td>
<td align="left">移除一个或多个 class</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().hasClass(string)</td>
<td align="left">检测 class</td>
<td align="center">boolean</td>
</tr>
</tbody></table>
<h2 id="（三）操作属性"><a href="#（三）操作属性" class="headerlink" title="（三）操作属性"></a>（三）操作属性</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().attr()</td>
<td align="left">获取或设置属性值（自定义属性）==基于 setAttribute、getAttribute==</td>
<td align="center">string</td>
</tr>
<tr>
<td align="left">$().prop()</td>
<td align="left">获取或设置特性值，==基于原生 DOM，特性映射，非特性不映射==</td>
<td align="center">string</td>
</tr>
</tbody></table>
<h2 id="（四）操作结构"><a href="#（四）操作结构" class="headerlink" title="（四）操作结构"></a>（四）操作结构</h2><h3 id="1-增（复制操作）"><a href="#1-增（复制操作）" class="headerlink" title="1.增（复制操作）"></a>1.增（复制操作）</h3><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$(==HTML==)</td>
<td align="left">创建元素（HTML 字符串）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().wrap(==HTML | jQuery | selector | DOM | fn==)</td>
<td align="left">创建父元素包裹选中元素,每一个单独包裹</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().wrapAll(==HTML | jQuery | selector | DOM | fn==)</td>
<td align="left">创建父元素包裹所有选中元素,统一包裹</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().wrapInner(==HTML | jQuery | selector | DOM | fn==)</td>
<td align="left">创建子元素包裹所有子元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().clone(boolean)</td>
<td align="left">克隆元素（true 深度克隆）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().data(data)</td>
<td align="left">存储或获取数据</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<h3 id="2-删（剪切操作）"><a href="#2-删（剪切操作）" class="headerlink" title="2.删（剪切操作）"></a>2.删（剪切操作）</h3><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().empty()</td>
<td align="left">清空子元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().remove()</td>
<td align="left">删除自身</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().detach()</td>
<td align="left">删除自身（包含数据）</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<h3 id="3-改（剪切操作）"><a href="#3-改（剪切操作）" class="headerlink" title="3.改（剪切操作）"></a>3.改（剪切操作）</h3><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$(“A”).insertBefore(selectorB)</td>
<td align="left">把 A 插入到 B 之前</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“B”).before(jQuery(A))</td>
<td align="left">在 B 之前插入 A</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“A”).insertAfter(selectorB)</td>
<td align="left">把 A 插入到 B 之后</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“B”).after(jQuery(A))</td>
<td align="left">在 B 之后插入 A</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“A”).appendTo(selectorB)</td>
<td align="left">把 A 插入到 B 中最后子元素的位置</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“B”).append(jQuery(A))</td>
<td align="left">在 B 中最后子元素的位置插入 A</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“A”).prependTo(selectorB)</td>
<td align="left">把 A 插入到 B 中第一子元素的位置</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$(“B”).prepend(jQuery(A))</td>
<td align="left">在 B 中第一子元素的位置插入 A</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<h3 id="4-查"><a href="#4-查" class="headerlink" title="4.查"></a>4.查</h3><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().siblings(selector)</td>
<td align="left">所有符合限定的兄弟元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().next(selector)</td>
<td align="left">下一个并且符合限定的兄弟元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().prev(selector)</td>
<td align="left">上一个并且符合限定的兄弟元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().nextAll(selector)</td>
<td align="left">之后并且符合限定的所有兄弟元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().prevAll(selector)</td>
<td align="left">之前并且符合限定的所有兄弟元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().nextUntil(label，selector)</td>
<td align="left">之后到标注为止并且符合限定的所有兄弟元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().prevUntil(label，selector)</td>
<td align="left">之前到标注为止并且符合限定的所有兄弟元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().parent(selector)</td>
<td align="left">符合限定的父元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().parents(selector)</td>
<td align="left">符合限定的所有祖先元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().closest(selector)</td>
<td align="left">符合限定的最近祖先元素（==包括自身==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().offsetParent(selector)</td>
<td align="left">符合限定的最近定位祖先元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().children(selector)</td>
<td align="left">符合限定的子元素</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().index(selector)</td>
<td align="left">在符合限定的兄弟元素中的索引==不存在返回-1==</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().slice(start, end)</td>
<td align="left">截取范围内的元素（包含 start, 不包含 end）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().each(fn(index, dom){})</td>
<td align="left">遍历</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<hr>
<h2 id="（五）操作位置"><a href="#（五）操作位置" class="headerlink" title="（五）操作位置"></a>（五）操作位置</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().offset()</td>
<td align="left">获取/设置距离文档的距离{left, top}==不考虑定位父级==</td>
<td align="center">object</td>
</tr>
<tr>
<td align="left">$().position()</td>
<td align="left">获取距定位父级的距离{left, top}==不支持设置==</td>
<td align="center">object</td>
</tr>
<tr>
<td align="left">$().scrollLeft(==number==)</td>
<td align="left">获取/设置横向滚动条的距离</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().scrollTop(==number==)</td>
<td align="left">获取/设置纵向滚动条的距离</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().width()</td>
<td align="left">获取内容盒宽度</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().height()</td>
<td align="left">获取内容盒高度</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().innerWidth()</td>
<td align="left">获取填充盒宽度</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().innerHeight()</td>
<td align="left">获取填充盒高度</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().outerWidth()</td>
<td align="left">获取边框盒宽度</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().outerHeight()</td>
<td align="left">获取边框盒高度</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().outerWidth(==true==)</td>
<td align="left">获取占用宽度（包含 margin）</td>
<td align="center">number</td>
</tr>
<tr>
<td align="left">$().outerHeight(==true==)</td>
<td align="left">获取占用高度（包含 margin）</td>
<td align="center">number</td>
</tr>
</tbody></table>
<hr>
<h1 id="四、事件"><a href="#四、事件" class="headerlink" title="四、事件"></a>四、事件</h1><h3 id="1-事件处理"><a href="#1-事件处理" class="headerlink" title="1.事件处理"></a>1.事件处理</h3><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().type(fn)</td>
<td align="left">绑定系统事件</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().on(type, selector, data, fn)</td>
<td align="left">绑定系统事件、自定义事件</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().one(type, selector, data, fn)</td>
<td align="left">绑定系统事件、自定义事件（==只执行一次==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().off(type, fn)</td>
<td align="left">解绑系统事件、自定义事件（==需与绑定时对应==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().trigger(type, arr)</td>
<td align="left">触发系统事件、自定义事件（==参数为数组形式==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().hover(fn, fn)</td>
<td align="left">hover 事件（==鼠标移入移出==）</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<h3 id="2-事件对象（兼容）"><a href="#2-事件对象（兼容）" class="headerlink" title="2.事件对象（兼容）"></a>2.事件对象（兼容）</h3><ul>
<li>e.pageX/Y</li>
<li>e.clientX/Y</li>
<li>e.which</li>
<li>e.button</li>
<li>e.preventDefault() 阻止默认事件</li>
<li>e.stopPropagation() 阻止冒泡</li>
<li>return false 阻止事件冒泡和默认事件</li>
</ul>
<hr>
<h1 id="五、动画"><a href="#五、动画" class="headerlink" title="五、动画"></a>五、动画</h1><h3 id="1-动画-API"><a href="#1-动画-API" class="headerlink" title="1.动画 API"></a>1.动画 API</h3><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().show(speed, easing, callback)</td>
<td align="left">显示（==宽高、透明度==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().hide(speed, easing, callback)</td>
<td align="left">隐藏</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().toggle(speed, easing, callback)</td>
<td align="left">显示/隐藏</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().fadeIn(speed, easing, callback)</td>
<td align="left">淡入（==针对 opacity==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().fadeOut(speed, easing, callback)</td>
<td align="left">淡出</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().fadeToggle(speed, easing, callback)</td>
<td align="left">淡入/淡出</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().fadeTo(speed, target, easing, callback)</td>
<td align="left">淡到 target 值</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().slideDown(speed, easing, callback)</td>
<td align="left">下拉（==针对高度==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().slideUp(speed, easing, callback)</td>
<td align="left">上拉</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().slideToggle(speed, easing, callback)</td>
<td align="left">下拉/上拉</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().animate(target, speed, easing, callback)</td>
<td align="left">动画（==综合运动==）</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().stop()</td>
<td align="left">停止当前动画，进行下段动画</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().stop(true)</td>
<td align="left">停止所有动画</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().stop(true, true)</td>
<td align="left">停止当前动画，并瞬间到达当前动画目标点</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().finish()</td>
<td align="left">直接到达最后动画目标点</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().delay(speed)</td>
<td align="left">用于动画之间，让一段动画结束后延迟一段时间在进行下段动画</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">jQuery.fx.off = true/false</td>
<td align="left">关闭动画过渡效果，直接到达每段目标点</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<h3 id="2-动画队列"><a href="#2-动画队列" class="headerlink" title="2.动画队列"></a>2.动画队列</h3><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$().queue(name, data)</td>
<td align="left">入队</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().queue(name)</td>
<td align="left">查队</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().dequeue(name)</td>
<td align="left">单一出队</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().queue(name, fn(next){next()})</td>
<td align="left">依次出队</td>
<td align="center">jQuery 对象</td>
</tr>
<tr>
<td align="left">$().clearQueue(name)</td>
<td align="left">清空队列</td>
<td align="center">jQuery 对象</td>
</tr>
</tbody></table>
<hr>
<h1 id="六、工具"><a href="#六、工具" class="headerlink" title="六、工具"></a>六、工具</h1><h2 id="（一）常用工具"><a href="#（一）常用工具" class="headerlink" title="（一）常用工具"></a>（一）常用工具</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$.type()</td>
<td align="left">类型判断</td>
<td align="center">string</td>
</tr>
<tr>
<td align="left">$.isArray()</td>
<td align="left">数组判断</td>
<td align="center">boolean</td>
</tr>
<tr>
<td align="left">$.isFunction()</td>
<td align="left">函数判断</td>
<td align="center">boolean</td>
</tr>
<tr>
<td align="left">$.trim()</td>
<td align="left">去除两端空格</td>
<td align="center">string</td>
</tr>
<tr>
<td align="left">$.proxy(fn, target)</td>
<td align="left">改变 this 指向</td>
<td align="center">function</td>
</tr>
<tr>
<td align="left">var $c = $.noConflict()</td>
<td align="left">防止冲突</td>
<td align="center">function</td>
</tr>
<tr>
<td align="left">$.each(arr, function(index, ele){})</td>
<td align="left">遍历</td>
<td align="center">array</td>
</tr>
<tr>
<td align="left">$.map(arr, function(index, ele){})</td>
<td align="left">遍历</td>
<td align="center">array</td>
</tr>
<tr>
<td align="left">$.parseJSON(string)</td>
<td align="left">解析 JSON</td>
<td align="center">object</td>
</tr>
<tr>
<td align="left">$.makeArray()</td>
<td align="left">类数组转换</td>
<td align="center">object</td>
</tr>
</tbody></table>
<h2 id="（二）拓展工具"><a href="#（二）拓展工具" class="headerlink" title="（二）拓展工具"></a>（二）拓展工具</h2><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">含义</th>
<th align="center">类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">$.extend(object)</td>
<td align="left">拓展静态方法</td>
<td align="center">object</td>
</tr>
<tr>
<td align="left">$.fn.extend(object)</td>
<td align="left">拓展实例方法</td>
<td align="center">object</td>
</tr>
</tbody></table>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">$.extend(&#123;</span><br><span class="line">  <span class="comment">//随机数</span></span><br><span class="line">  <span class="attr">getRandom</span>: <span class="function"><span class="keyword">function</span>(<span class="params">min, max</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (min &amp;&amp; max) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Math</span>.random() * (max - min) + min;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.random();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">$.getRandom(<span class="number">5</span>, <span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//拖拽</span></span><br><span class="line">$.fn.extend(&#123;</span><br><span class="line">  <span class="attr">drag</span>: <span class="function"><span class="keyword">function</span>(<span class="params">dom</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> disX, disY;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">    $(<span class="built_in">this</span>).on(<span class="string">&quot;mousedown&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;drag&quot;</span>);</span><br><span class="line">      disX = e.pageX - $(<span class="built_in">this</span>).offset().left;</span><br><span class="line">      disY = e.pageY - $(<span class="built_in">this</span>).offset().top;</span><br><span class="line">      $(<span class="built_in">document</span>).on(<span class="string">&quot;mousemove&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">        self.css(&#123;</span><br><span class="line">          <span class="attr">left</span>: e.pageX - disX,</span><br><span class="line">          <span class="attr">top</span>: e.pageY - disY,</span><br><span class="line">          <span class="attr">cursor</span>: <span class="string">&quot;move&quot;</span></span><br><span class="line">        &#125;);</span><br><span class="line">      &#125;);</span><br><span class="line">      $(<span class="built_in">document</span>).on(<span class="string">&quot;mouseup&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        $(<span class="built_in">document</span>).off(<span class="string">&quot;mousemove&quot;</span>);</span><br><span class="line">        $(<span class="built_in">document</span>).off(<span class="string">&quot;mouseup&quot;</span>);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line">$(<span class="string">&quot;.demo&quot;</span>).drag();</span><br></pre></td></tr></table></figure>

<h2 id="（三）网络工具"><a href="#（三）网络工具" class="headerlink" title="（三）网络工具"></a>（三）网络工具</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">  <span class="comment">//请求地址</span></span><br><span class="line">  <span class="attr">url</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="comment">//请求方式</span></span><br><span class="line">  <span class="attr">type</span>: <span class="string">&quot;GET&quot;</span>,</span><br><span class="line">  <span class="comment">//设置上下文</span></span><br><span class="line">  context：$(),</span><br><span class="line">  <span class="comment">//允许请求时长</span></span><br><span class="line">  <span class="attr">timeout</span>: <span class="number">1000</span>,</span><br><span class="line">  <span class="comment">//异步请求（默认异步）</span></span><br><span class="line">  <span class="attr">async</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">//跨域</span></span><br><span class="line">  <span class="attr">dataType</span>: <span class="string">&quot;jsonp&quot;</span>,</span><br><span class="line">  <span class="comment">//成功回调 res数据包&#123;code状态码 msg状态 data数据&#125; </span></span><br><span class="line">  <span class="attr">success</span>: <span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>&#123;&#125;,</span><br><span class="line">  <span class="comment">//失败回调 err错误对象&#123;status状态 statusText提示&#125; </span></span><br><span class="line">  <span class="attr">error</span>: <span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>&#123;&#125;,</span><br><span class="line">  <span class="comment">//完成回调（最后执行）</span></span><br><span class="line">  <span class="attr">complete</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="（四）回调机制"><a href="#（四）回调机制" class="headerlink" title="（四）回调机制"></a>（四）回调机制</h2><h3 id="1-回调Callback"><a href="#1-回调Callback" class="headerlink" title="1.回调Callback"></a>1.回调Callback</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> cb = $.Callback(param);</span><br><span class="line"><span class="comment">//添加</span></span><br><span class="line">cb.add(<span class="function"><span class="title">fn</span>(<span class="params">x,y</span>)</span>&#123;&#125;)</span><br><span class="line"><span class="comment">//执行</span></span><br><span class="line">cb.fire(x,y)</span><br></pre></td></tr></table></figure>
<ul>
<li>param ==&gt;&gt; “once” 执行一次就好</li>
<li>param ==&gt;&gt; “memory” 记忆功能（后加的也可执行）</li>
<li>param ==&gt;&gt; “unique” 去重功能（一样的功能只添加一个）</li>
<li>param ==&gt;&gt; “stopFalse” 间断功能（遇到返回false，后续函数就不在执行）</li>
</ul>
<h3 id="2-状态Deferred"><a href="#2-状态Deferred" class="headerlink" title="2.状态Deferred"></a>2.状态Deferred</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> df= $.Deferred();</span><br><span class="line"><span class="comment">//注册成功的回调函数</span></span><br><span class="line">df.done(fn)</span><br><span class="line"><span class="comment">//成功调用</span></span><br><span class="line">df.resolve()</span><br><span class="line"></span><br><span class="line"><span class="comment">//注册失败的回调函数</span></span><br><span class="line">df.fail(fn)</span><br><span class="line"><span class="comment">//失败调用</span></span><br><span class="line">df.reject()</span><br><span class="line"></span><br><span class="line"><span class="comment">//注册机进行时的回调函数</span></span><br><span class="line">df.progress(fn)</span><br><span class="line"><span class="comment">//进行时调用</span></span><br><span class="line">df.notify()</span><br><span class="line"></span><br><span class="line"><span class="comment">//严格延迟对象，只能注册，不能调用</span></span><br><span class="line">df.promise()</span><br><span class="line"></span><br><span class="line"><span class="comment">//简化注册</span></span><br><span class="line">df.then(doneFn, failFn, progressFn)</span><br><span class="line"></span><br><span class="line"><span class="comment">//接力拓展</span></span><br><span class="line">df.then(<span class="function"><span class="title">doneFn</span>(<span class="params"></span>)</span>&#123;<span class="keyword">return</span> data&#125;, failFn, progressFn).then(<span class="function"><span class="title">doneFn</span>(<span class="params">data</span>)</span>&#123;use data&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="3-when"><a href="#3-when" class="headerlink" title="3.when"></a>3.when</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> df1 = $.Deferred();</span><br><span class="line"><span class="keyword">var</span> df2 = $.Deferred();</span><br><span class="line"><span class="keyword">var</span> df3 = $.Deferred();</span><br><span class="line">when(df1(), df2(), df3()).then(resolveFn, rejectFn, notifyFn)</span><br></pre></td></tr></table></figure>
<ul>
<li>when里执行的所有结果为resolve才执行resolveFn</li>
<li>when里执行的所有结果为reject才执行rejectFn</li>
<li>否则就执行notifyFn</li>
</ul>
<hr>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/01/01/JQUERYa-0/" data-id="ckya9fc12000gygf61b2yh0xo"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/js-jquery/" rel="tag">js jquery</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-ES5a" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2017/12/01/ES5a/"
    >javaScript 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2017/12/01/ES5a/" class="article-date">
  <time datetime="2017-11-30T16:00:00.000Z" itemprop="datePublished">2017-12-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <p>[toc]</p>
<h2 id="一、js数据类型"><a href="#一、js数据类型" class="headerlink" title="一、js数据类型"></a>一、js数据类型</h2><h3 id="（一）原始类型"><a href="#（一）原始类型" class="headerlink" title="（一）原始类型"></a>（一）原始类型</h3><h4 id="1-数字-number"><a href="#1-数字-number" class="headerlink" title="1.数字 number"></a>1.数字 number</h4><blockquote>
<p>直接书写 十进制<br>0前缀 八进制<br>0x前缀  十六进制<br>0b前缀 二进制</p>
</blockquote>
<h4 id="2-字符串-string"><a href="#2-字符串-string" class="headerlink" title="2.字符串 string"></a>2.字符串 string</h4><blockquote>
<p>单引号 ‘’<br>双引号 “”<br>模板 ``</p>
</blockquote>
<table>
<thead>
<tr>
<th align="center">转义字符</th>
<th align="center">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="center">&#39;</td>
<td align="center">单引号</td>
</tr>
<tr>
<td align="center">&quot;</td>
<td align="center">双引号</td>
</tr>
<tr>
<td align="center">\</td>
<td align="center">反斜杠</td>
</tr>
<tr>
<td align="center">\n</td>
<td align="center">换行</td>
</tr>
<tr>
<td align="center">\t</td>
<td align="center">制表符</td>
</tr>
</tbody></table>
<h4 id="3-布尔-boolean"><a href="#3-布尔-boolean" class="headerlink" title="3.布尔 boolean"></a>3.布尔 boolean</h4><blockquote>
<p>true 真<br>false 假</p>
</blockquote>
<h4 id="4-未定义-undefined"><a href="#4-未定义-undefined" class="headerlink" title="4.未定义 undefined"></a>4.未定义 undefined</h4><blockquote>
<p>undefined</p>
</blockquote>
<h4 id="5-空-null"><a href="#5-空-null" class="headerlink" title="5.空 null"></a>5.空 null</h4><blockquote>
<p>null</p>
</blockquote>
<h3 id="（二）引用类型"><a href="#（二）引用类型" class="headerlink" title="（二）引用类型"></a>（二）引用类型</h3><h4 id="1-对象-object"><a href="#1-对象-object" class="headerlink" title="1.对象 object"></a>1.对象 object</h4><blockquote>
<p>{}</p>
</blockquote>
<h4 id="2-函数-function"><a href="#2-函数-function" class="headerlink" title="2.函数 function"></a>2.函数 function</h4><blockquote>
<p>function () {}</p>
</blockquote>
<hr>
<h2 id="二、变量"><a href="#二、变量" class="headerlink" title="二、变量"></a>二、变量</h2><h3 id="1-概念"><a href="#1-概念" class="headerlink" title="1.概念"></a>1.概念</h3><h4 id="（1）什么是变量？"><a href="#（1）什么是变量？" class="headerlink" title="（1）什么是变量？"></a>（1）什么是变量？</h4><ul>
<li>一块内存空间，用于存储数据</li>
</ul>
<h4 id="（2）变量声明"><a href="#（2）变量声明" class="headerlink" title="（2）变量声明"></a>（2）变量声明</h4><blockquote>
<p>var 变量名</p>
</blockquote>
<h4 id="（3）变量赋值"><a href="#（3）变量赋值" class="headerlink" title="（3）变量赋值"></a>（3）变量赋值</h4><blockquote>
<p>变量名 = 数据</p>
</blockquote>
<h3 id="2-特点"><a href="#2-特点" class="headerlink" title="2.特点"></a>2.特点</h3><h4 id="（1）变量的值是可变的"><a href="#（1）变量的值是可变的" class="headerlink" title="（1）变量的值是可变的"></a>（1）变量的值是可变的</h4><ul>
<li>变量可以重复赋值，新的值会覆盖原来的值</li>
</ul>
<h4 id="（2）变量命名规范"><a href="#（2）变量命名规范" class="headerlink" title="（2）变量命名规范"></a>（2）变量命名规范</h4><ul>
<li>只能使用字母、下划线、$、数字</li>
<li>只能以字母、下划线、$开头</li>
<li>不能使用关键字、保留字</li>
<li>做到见名知义</li>
<li>多个单词小驼峰命名法</li>
</ul>
<h4 id="（3）变量声明赋值可以合并书写（语法糖）"><a href="#（3）变量声明赋值可以合并书写（语法糖）" class="headerlink" title="（3）变量声明赋值可以合并书写（语法糖）"></a>（3）变量声明赋值可以合并书写（语法糖）</h4><blockquote>
<p>var name = “huafu”;</p>
</blockquote>
<h4 id="（4）多个变量声明赋值可以合并书写（语法糖）"><a href="#（4）多个变量声明赋值可以合并书写（语法糖）" class="headerlink" title="（4）多个变量声明赋值可以合并书写（语法糖）"></a>（4）多个变量声明赋值可以合并书写（语法糖）</h4><blockquote>
<p>var a = 1, b = 2, c = 3;</p>
</blockquote>
<h4 id="（5）任何书写数据的地方，都可书写变量"><a href="#（5）任何书写数据的地方，都可书写变量" class="headerlink" title="（5）任何书写数据的地方，都可书写变量"></a>（5）任何书写数据的地方，都可书写变量</h4><h4 id="（6）使用未声明的变量时，会产生错误"><a href="#（6）使用未声明的变量时，会产生错误" class="headerlink" title="（6）使用未声明的变量时，会产生错误"></a>（6）使用未声明的变量时，会产生错误</h4><ul>
<li>例外 typeof 判断变量类型使用未声明的变量不会报错</li>
</ul>
<h4 id="（7）js里存在变量声明提升"><a href="#（7）js里存在变量声明提升" class="headerlink" title="（7）js里存在变量声明提升"></a>（7）js里存在变量声明提升</h4><ul>
<li>提升不会超越脚本快</li>
</ul>
<h4 id="（8）js里变量可以重复声明"><a href="#（8）js里变量可以重复声明" class="headerlink" title="（8）js里变量可以重复声明"></a>（8）js里变量可以重复声明</h4><ul>
<li>声明提升后会合并</li>
</ul>
<h3 id="3-变量与对象"><a href="#3-变量与对象" class="headerlink" title="3.变量与对象"></a>3.变量与对象</h3><h4 id="（1）书写"><a href="#（1）书写" class="headerlink" title="（1）书写"></a>（1）书写</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> user = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;huafu&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="（2）属性操作方式"><a href="#（2）属性操作方式" class="headerlink" title="（2）属性操作方式"></a>（2）属性操作方式</h4><blockquote>
<p>user.name</p>
</blockquote>
<blockquote>
<p>user[“name”]</p>
</blockquote>
<h4 id="（3）增删改查"><a href="#（3）增删改查" class="headerlink" title="（3）增删改查"></a>（3）增删改查</h4><ul>
<li>访问不存在的对象时，会产生错误</li>
<li>访问对象不存在的属性时，不会报错，undefined</li>
<li>给对象不存在的属性赋值时，会添加此属性</li>
<li>给对象的属性重新赋值时，修改此属性值</li>
<li>delete 操作符删除对象属性</li>
</ul>
<h4 id="（4）属性表达式"><a href="#（4）属性表达式" class="headerlink" title="（4）属性表达式"></a>（4）属性表达式</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> user = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;huafu&quot;</span>,</span><br><span class="line">  <span class="string">&quot;age&quot;</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="number">1</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">&quot;??&quot;</span>: <span class="literal">undefined</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> prop = <span class="string">&quot;name&quot;</span>;</span><br><span class="line">user[prop]</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<ul>
<li>实际上，js对属性名没有严格限制，可以是任何形式</li>
<li>访问特殊的属性名，只能使用属性表达式，否则不满足语法要求</li>
<li>使用属性表达式，放置一个变量，改变变量内容，就可以实现访问不同的对象属性</li>
</ul>
<h4 id="（5）全局对象"><a href="#（5）全局对象" class="headerlink" title="（5）全局对象"></a>（5）全局对象</h4><ul>
<li>js大部分的宿主环境，都会提供一个特殊的对象，该对象可以直接访问（全局对象）</li>
<li>在浏览器环境中，全局对象为window，表示整个窗口</li>
<li>全局对象的属性可以直接使用属性名访问，不需要书写对象名</li>
<li>开发者声明的所有变量，实际上都会成为window对象的属性</li>
<li>如果变量没有赋值，该变量不会覆盖window对象的同名属性 </li>
<li>window.name属性比较特殊，任何类型的赋值都会变成字符串类型的内容</li>
<li>变量未经声明就赋值，等于给window对象增加此属性</li>
</ul>
<h4 id="（6）内存空间"><a href="#（6）内存空间" class="headerlink" title="（6）内存空间"></a>（6）内存空间</h4><h5 id="1）变量存储的信息"><a href="#1）变量存储的信息" class="headerlink" title="1）变量存储的信息"></a>1）变量存储的信息</h5><ul>
<li><p>变量赋值原始类型，存放的是数据内容</p>
<ul>
<li>使用变量进行赋值的时候，直接复制变量内存储的数据</li>
<li>当一个变量内容发生改变时，其它变量不会受影响</li>
</ul>
</li>
<li><p>变量赋值引用类型，存放的是数据内容的地址引用</p>
<ul>
<li>使用变量进行赋值的时候，复制的是变量内存储的地址引用</li>
<li>当其中一个变量对引用数据进行操作时，所有相同引用的变量内容都将受影响</li>
</ul>
</li>
<li><p>所有出现对象字面量的地方，都将会在内存空间里开辟新对象</p>
<ul>
<li>对象属性存储的是一个对象时，此属性保存的其实是对一个对象的引用</li>
</ul>
</li>
</ul>
<h5 id="2）垃圾回收"><a href="#2）垃圾回收" class="headerlink" title="2）垃圾回收"></a>2）垃圾回收</h5><ul>
<li>内存中无法访问到的对象（没有任何引用指向），会被视为垃圾</li>
<li>js引擎会在合适的时间将其占用的内存释放</li>
</ul>
<hr>
<h2 id="三、运算符"><a href="#三、运算符" class="headerlink" title="三、运算符"></a>三、运算符</h2><h3 id="1-概述"><a href="#1-概述" class="headerlink" title="1.概述"></a>1.概述</h3><h4 id="（1）操作符-amp-操作数"><a href="#（1）操作符-amp-操作数" class="headerlink" title="（1）操作符&amp;操作数"></a>（1）操作符&amp;操作数</h4><ul>
<li>操作符：运算符、参与运算的符号<ul>
<li>操作符不一定只是一个符号</li>
<li>操作符出现在不同的位置，可能具有不同的意义</li>
</ul>
</li>
<li>操作数：参与操作的数据，也称之为“元”</li>
</ul>
<h4 id="（2）分类"><a href="#（2）分类" class="headerlink" title="（2）分类"></a>（2）分类</h4><ul>
<li>按操作数的数量分<ul>
<li>一元（目）：() . [] {}</li>
<li>二元（目）: + - * / % =</li>
<li>三元（目）：?:</li>
</ul>
</li>
</ul>
<h4 id="（3）表达式"><a href="#（3）表达式" class="headerlink" title="（3）表达式"></a>（3）表达式</h4><ul>
<li>表达式 = 操作符 + 操作数</li>
<li>返回值：每个表达式都会返回一个运算结果</li>
<li>返回类型：返回值的类型</li>
<li>表达式就是数据，所有书写数据的地方都可以书写表达式</li>
</ul>
<h4 id="（4）返回值"><a href="#（4）返回值" class="headerlink" title="（4）返回值"></a>（4）返回值</h4><table>
<thead>
<tr>
<th align="center">操作符</th>
<th align="center">含义</th>
<th align="center">返回值</th>
</tr>
</thead>
<tbody><tr>
<td align="center">=</td>
<td align="center">赋值表达式</td>
<td align="center">返回赋值的结果</td>
</tr>
<tr>
<td align="center">.</td>
<td align="center">属性访问表达式</td>
<td align="center">返回该属性的属性值</td>
</tr>
<tr>
<td align="center">[]</td>
<td align="center">属性访问表达式</td>
<td align="center">返回该属性的属性值</td>
</tr>
<tr>
<td align="center">()</td>
<td align="center">函数调用表达式</td>
<td align="center">返回值取决于函数运行</td>
</tr>
<tr>
<td align="center">var</td>
<td align="center">变量声明表达式</td>
<td align="center">返回undefined</td>
</tr>
</tbody></table>
<h3 id="2-算数运算符（数学运算符）"><a href="#2-算数运算符（数学运算符）" class="headerlink" title="2.算数运算符（数学运算符）"></a>2.算数运算符（数学运算符）</h3><table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">含义</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">+</td>
<td align="center">求和表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">-</td>
<td align="center">求差表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">*</td>
<td align="center">求积表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">/</td>
<td align="center">求商表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">%</td>
<td align="center">求余表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">++</td>
<td align="center">自增表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">–</td>
<td align="center">自减表达式</td>
<td align="center">——</td>
</tr>
</tbody></table>
<h4 id="（1）运算细节"><a href="#（1）运算细节" class="headerlink" title="（1）运算细节"></a>（1）运算细节</h4><ul>
<li>数字运算是不精确的</li>
<li>除数为0，结果无穷<ul>
<li>被除数为正数（infinity）</li>
<li>被除数为0（NaN）</li>
<li>被除数为负数（-infinity）</li>
</ul>
</li>
<li>无法运算，返回值为NaN</li>
<li>% 求余与求模有区别（求余返回值符号与被余数保持一致）</li>
<li>typeof返回值类型为string</li>
<li>isNaN()函数返回值类型为boolean</li>
<li>isFinite()函数返回值类型为boolean</li>
</ul>
<h4 id="（2）非number类型运算"><a href="#（2）非number类型运算" class="headerlink" title="（2）非number类型运算"></a>（2）非number类型运算</h4><h5 id="1）-非-运算"><a href="#1）-非-运算" class="headerlink" title="1） 非 + 运算"></a>1） 非 + 运算</h5><ul>
<li>原始值自动转化为数字，再运算</li>
<li>NaN与任何数运算，结果为NaN</li>
<li>Infinity与任何数运算，结果为Infinity<blockquote>
<p>-5**2 ==&gt; 报错<br>(-5)**2 ==&gt; 25</p>
</blockquote>
</li>
</ul>
<table>
<thead>
<tr>
<th align="center">转换值</th>
<th align="center">结果</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">boolean：false</td>
<td align="center">0</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">boolean：true</td>
<td align="center">1</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">string：数字</td>
<td align="center">数值</td>
<td align="center">能识别Infinity</td>
</tr>
<tr>
<td align="center">string：非数</td>
<td align="center">NaN</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">string：空串</td>
<td align="center">0</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">string：空格</td>
<td align="center">0</td>
<td align="center">转换会忽略前后空格</td>
</tr>
<tr>
<td align="center">null</td>
<td align="center">0</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">undefined</td>
<td align="center">NaN</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">{}</td>
<td align="center">“[object Object]” ==&gt; NaN</td>
<td align="center">对象转换为字符串</td>
</tr>
</tbody></table>
<ul>
<li>引用值自动转化为字符串，再转换为数字，然后运算<blockquote>
<p>{}*5 ==&gt; 报错<br>({})*5 ==&gt; NaN</p>
</blockquote>
</li>
</ul>
<h5 id="2）-运算"><a href="#2）-运算" class="headerlink" title="2） + 运算"></a>2） + 运算</h5><ul>
<li>操作数有字符串参与，含义为字符串拼接</li>
<li>若只有一个操作数为字符串，另一个操作数自动转换为字符串，然后拼接</li>
<li>若有一个操作数为对象，对象自动转换为字符串，然后拼接</li>
</ul>
<h4 id="（3）自增自减-–"><a href="#（3）自增自减-–" class="headerlink" title="（3）自增自减 ++ –"></a>（3）自增自减 ++ –</h4><ul>
<li>自增、自减1</li>
<li>操作符在前：表达式返回值为变量自增后的值</li>
<li>操作符在后：表达式返回值为变量自增前的值</li>
<li>操作符在前在后，对于变量来说，结果都一样</li>
<li>操作符在前在后，对于运算来说，由于表达式的返回值不一样，结果也会相应改变</li>
</ul>
<h4 id="（4）优先级"><a href="#（4）优先级" class="headerlink" title="（4）优先级"></a>（4）优先级</h4><h5 id="1）从高到底"><a href="#1）从高到底" class="headerlink" title="1）从高到底"></a>1）从高到底</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">++ --</span><br><span class="line">* / %</span><br><span class="line">+ - </span><br></pre></td></tr></table></figure>

<h5 id="2）运算规则"><a href="#2）运算规则" class="headerlink" title="2）运算规则"></a>2）运算规则</h5><ul>
<li>从左到右依次进行</li>
<li>若相连两运算符，左边优先级高于等于右边，则直接运算</li>
<li>若相连两运算符，左边优先级低于右边，则继续往后进行</li>
</ul>
<h4 id="（5）求余与求模"><a href="#（5）求余与求模" class="headerlink" title="（5）求余与求模"></a>（5）求余与求模</h4><ul>
<li>求余 %<blockquote>
<p>x % y<br>x - n * y n的取值为x/y的商取整（==向0取整==）</p>
</blockquote>
</li>
<li>求模<blockquote>
<p>x % y<br>x - n * y n的取值为x/y的商取整（==向下取整==）</p>
</blockquote>
</li>
<li>区别<ul>
<li>只有在余数为负数时才有区别</li>
<li>求余的符号与被除数相同</li>
<li>求模的符号与除数相同</li>
</ul>
</li>
</ul>
<hr>
<h3 id="3-比较运算符"><a href="#3-比较运算符" class="headerlink" title="3.比较运算符"></a>3.比较运算符</h3><table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">含义</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">&gt;</td>
<td align="center">大于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">&gt;=</td>
<td align="center">大于等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">&lt;</td>
<td align="center">小于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">&lt;=</td>
<td align="center">小于等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">==</td>
<td align="center">等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">!=</td>
<td align="center">不等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">===</td>
<td align="center">恒等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">!==</td>
<td align="center">不恒等于达式</td>
<td align="center">——</td>
</tr>
</tbody></table>
<h4 id="（1）比较大小"><a href="#（1）比较大小" class="headerlink" title="（1）比较大小"></a>（1）比较大小</h4><ul>
<li>表达式的返回值类型：boolean</li>
<li>优先级低于算数运算符</li>
<li>两个是数字比较大小</li>
<li>两个是字符串比较ASCII码顺序</li>
<li>原始值的其它类型，自动转化为数字，再比较</li>
<li>NaN与任何比较都是false</li>
<li>+Infinity比任何数都大</li>
<li>-Infinity比任何数都小</li>
<li>引用值的其它类型，自动转化为字符串，再转化为数字，然后比较</li>
</ul>
<h4 id="（2）比较相等"><a href="#（2）比较相等" class="headerlink" title="（2）比较相等"></a>（2）比较相等</h4><ul>
<li>原始值比较数据</li>
<li>引用值比较地址</li>
<li>undefined与null比较相等，与0、false比较则不等</li>
<li>其它原始类型先转换为数字，再比较</li>
<li>NaN与任何比较都不想等，包括自身</li>
<li>+Infinity、-Infinity只跟自身相等，与其它不等</li>
</ul>
<h4 id="（3）严格相等"><a href="#（3）严格相等" class="headerlink" title="（3）严格相等 === !=="></a>（3）严格相等 === !==</h4><ul>
<li>两端数据和类型都必须相同才为true</li>
<li>两端数据和类型只要有一个不同就为false</li>
<li>undefined与null比较：false</li>
<li>NaN与任何比较，包括自身：false</li>
<li>+Infinity、-Infinity只跟自身相等，与其它不等</li>
</ul>
<hr>
<h3 id="4-逻辑运算符"><a href="#4-逻辑运算符" class="headerlink" title="4.逻辑运算符"></a>4.逻辑运算符</h3><table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">含义</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">&amp;&amp;</td>
<td align="center">与</td>
<td align="center">并且</td>
</tr>
<tr>
<td align="center">||</td>
<td align="center">或</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">！</td>
<td align="center">非</td>
<td align="center">——</td>
</tr>
</tbody></table>
<h4 id="1-A-amp-amp-B"><a href="#1-A-amp-amp-B" class="headerlink" title="(1) A &amp;&amp; B"></a>(1) A &amp;&amp; B</h4><ul>
<li><p>null、undefined、false、NaN、””、0 均为false</p>
</li>
<li><p>若表达式A的结果为fale</p>
<ul>
<li>忽略表达式B（不运行）</li>
<li>返回表达式A的结果</li>
</ul>
</li>
<li><p>若表达式A的结果为true</p>
<ul>
<li>运行表达式B</li>
<li>返回表达式B的结果</li>
</ul>
</li>
</ul>
<h4 id="2-A-B"><a href="#2-A-B" class="headerlink" title="(2) A || B"></a>(2) A || B</h4><ul>
<li><p>null、undefined、false、NaN、””、0 均为false</p>
</li>
<li><p>若表达式A的结果为true</p>
<ul>
<li>忽略表达式B（不运行）</li>
<li>返回表达式A的结果</li>
</ul>
</li>
<li><p>若表达式A的结果为false</p>
<ul>
<li>运行表达式B</li>
<li>返回表达式B的结果</li>
</ul>
</li>
</ul>
<h4 id="（3）-A"><a href="#（3）-A" class="headerlink" title="（3）!A"></a>（3）!A</h4><ul>
<li>表达式A的结果转化为boolean</li>
<li>boolean结果取反返回</li>
</ul>
<hr>
<h3 id="5-三目运算"><a href="#5-三目运算" class="headerlink" title="5.三目运算"></a>5.三目运算</h3><p><strong>A ？B : C</strong></p>
<ul>
<li>如果表达式A的结果为true<ul>
<li>运行并返回表达式B的结果</li>
<li>忽略表达式C（不运行）</li>
</ul>
</li>
<li>如果表达式A的结果为false<ul>
<li>运行并返回表达式C的结果</li>
<li>忽略表达式B（不运行）</li>
</ul>
</li>
</ul>
<hr>
<h3 id="6-赋值运算符"><a href="#6-赋值运算符" class="headerlink" title="6.赋值运算符"></a>6.赋值运算符</h3><table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">含义</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">+=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">-=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">*=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">/=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">%=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">**=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
</tbody></table>
<hr>
<h3 id="7-其它运算符"><a href="#7-其它运算符" class="headerlink" title="7.其它运算符"></a>7.其它运算符</h3><ul>
<li>typeof(A) 获取表达式A结果的类型，返回值类型为字符串</li>
<li>void(A) 运行表达式A，返回值为undefined</li>
<li>A,B 逗号运算符，依次运算表达式A和表达式B，后一个表达式B的结果（==优先级低于赋值==）</li>
</ul>
<hr>
<h3 id="8-数字的存储"><a href="#8-数字的存储" class="headerlink" title="8.数字的存储"></a>8.数字的存储</h3><h4 id="（1）问题？"><a href="#（1）问题？" class="headerlink" title="（1）问题？"></a>（1）问题？</h4><h5 id="1）js中小数运算精确吗？"><a href="#1）js中小数运算精确吗？" class="headerlink" title="1）js中小数运算精确吗？"></a>1）js中小数运算精确吗？</h5><ul>
<li>不一定<h5 id="2）js中整数运算精确吗？"><a href="#2）js中整数运算精确吗？" class="headerlink" title="2）js中整数运算精确吗？"></a>2）js中整数运算精确吗？</h5></li>
<li>不一定<h5 id="3）js中整数是连续的吗？"><a href="#3）js中整数是连续的吗？" class="headerlink" title="3）js中整数是连续的吗？"></a>3）js中整数是连续的吗？</h5></li>
<li>不是<h5 id="4）js中最大的连续整数？"><a href="#4）js中最大的连续整数？" class="headerlink" title="4）js中最大的连续整数？"></a>4）js中最大的连续整数？</h5></li>
<li>Number.MAX_SAFE_INTEGER</li>
<li>9007199254740991<h5 id="5）js中表示数字的有效位数？"><a href="#5）js中表示数字的有效位数？" class="headerlink" title="5）js中表示数字的有效位数？"></a>5）js中表示数字的有效位数？</h5></li>
<li>16~17位</li>
</ul>
<h4 id="（2）解决"><a href="#（2）解决" class="headerlink" title="（2）解决"></a>（2）解决</h4><p><strong>二进制双精度64位存储标准</strong></p>
<ul>
<li>第一位表示符号<ul>
<li>0 表示正数</li>
<li>1 表示负数</li>
</ul>
</li>
<li>2~12位表示指数</li>
<li>后53位表示小数</li>
</ul>
<h4 id="（3）位运算"><a href="#（3）位运算" class="headerlink" title="（3）位运算"></a>（3）位运算</h4><p><strong>将数字取整按32位二进制存储</strong></p>
<ul>
<li><strong>位与 &amp;</strong><ul>
<li>每一位进行比较，如果都为1，结果为1，否则为0</li>
</ul>
</li>
<li><strong>位或 |</strong><ul>
<li>每一位进行比较，如果都为0，结果为0，否则为1</li>
</ul>
</li>
<li><strong>位非 ~</strong><ul>
<li>每一位进行取反，如果为0，结果为1，如果为1，结果为0</li>
<li>NaN、Infinity、-Infinity都看作0</li>
<li>==- 数字 -1==</li>
<li><blockquote>
<p>~2</p>
</blockquote>
</li>
<li><blockquote>
<p>-2-1</p>
</blockquote>
</li>
<li><blockquote>
<p>-3</p>
</blockquote>
</li>
</ul>
</li>
<li><strong>位异或 ^</strong> <ul>
<li>每一位进行比较，相同为0，不同为1</li>
</ul>
</li>
<li><strong>左位移 &lt;&lt;</strong><ul>
<li>整体向左移动指定位数</li>
<li>x &lt;&lt; n 相当于 x * 2的n次方</li>
</ul>
</li>
<li><strong>右位移 &gt;&gt;</strong><ul>
<li>整体向右移动指定位数</li>
<li>x &gt;&gt; n 相当于 x / 2的n次方</li>
</ul>
</li>
</ul>
<hr>
<h2 id="四、流程控制"><a href="#四、流程控制" class="headerlink" title="四、流程控制"></a>四、流程控制</h2><h3 id="（一）流程图"><a href="#（一）流程图" class="headerlink" title="（一）流程图"></a>（一）流程图</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">graph TD</span><br><span class="line">style st fill:lightblue;</span><br><span class="line">style ed fill:lightblue;</span><br><span class="line">style do fill:lightblue;</span><br><span class="line">style in fill:lightblue;</span><br><span class="line">style if fill:lightblue;</span><br><span class="line">st(圆角矩形)</span><br><span class="line">ed((圆形))</span><br><span class="line">do[矩形]</span><br><span class="line">in&gt;旗帜形]</span><br><span class="line">if&#123;菱形&#125;</span><br></pre></td></tr></table></figure>

<h3 id="（二）if判断"><a href="#（二）if判断" class="headerlink" title="（二）if判断"></a>（二）if判断</h3><h4 id="1-语法"><a href="#1-语法" class="headerlink" title="1.语法"></a>1.语法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>()&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>()&#123;&#125;<span class="keyword">else</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>()&#123;&#125;<span class="keyword">else</span> <span class="keyword">if</span>()&#123;&#125;<span class="keyword">else</span>&#123;&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<ul>
<li>一条if判断语句中：<ul>
<li>if块只能出现一个</li>
<li>else if块可以出现多个（包括0个）</li>
<li>else块只能出现0个或一个</li>
</ul>
</li>
</ul>
<h4 id="2-执行顺序"><a href="#2-执行顺序" class="headerlink" title="2.执行顺序"></a>2.执行顺序</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件<span class="number">1</span>)&#123;A&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">2</span>)&#123;B&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">3</span>)&#123;C&#125;</span><br><span class="line"><span class="keyword">else</span>&#123;D&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>代码从上到下依次进行：<ul>
<li>如果满足条件1，执行A代码块，后面的直接忽略，语句结束</li>
<li>如果不满足条件1，忽略A代码块，看条件2</li>
<li>如果满足条件2，执行B代码块，后面的直接忽略，语句结束</li>
<li>如果不满足条件2，忽略B代码块，看条件3</li>
<li>如果满足条件3，执行C代码块，后面的直接忽略，语句结束</li>
<li>如果不满足条件3，忽略C代码块，执行D代码块，语句结束</li>
</ul>
</li>
</ul>
<h3 id="（三）switch开关"><a href="#（三）switch开关" class="headerlink" title="（三）switch开关"></a>（三）switch开关</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span>(n)&#123;</span><br><span class="line">  <span class="keyword">case</span> a: A; <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> b: B; <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> c: C; <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">default</span>: D; <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>代码从上到下依次进行：<ul>
<li>如果n === a，执行A代码块，后面的直接忽略，语句结束</li>
<li>如果n !== a，忽略A代码块，看条件n和b</li>
<li>如果n === b，执行B代码块，后面的直接忽略，语句结束</li>
<li>如果n !== b，忽略B代码块，看条件n和c</li>
<li>如果n === c，执行C代码块，后面的直接忽略，语句结束</li>
<li>如果n !== c，执行D代码块，语句结束</li>
</ul>
</li>
</ul>
<h3 id="（四）while循环"><a href="#（四）while循环" class="headerlink" title="（四）while循环"></a>（四）while循环</h3><h4 id="1-while"><a href="#1-while" class="headerlink" title="1.while(){}"></a>1.while(){}</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span>(条件)&#123;</span><br><span class="line">  执行</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>判断条件<ul>
<li>条件满足，执行循环体，然后继续判断条件—循环</li>
<li>条件不满足，语句结束</li>
</ul>
</li>
</ul>
<h4 id="2-do-while"><a href="#2-do-while" class="headerlink" title="2.do{}while()"></a>2.do{}while()</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">do</span>&#123;</span><br><span class="line">  执行</span><br><span class="line">&#125;<span class="keyword">while</span>(条件)</span><br></pre></td></tr></table></figure>
<ul>
<li>执行循环体</li>
<li>判断条件<ul>
<li>条件满足，执行循环体，然后继续判断条件—循环</li>
<li>条件不满足，语句结束</li>
</ul>
</li>
</ul>
<h3 id="（五）for循环"><a href="#（五）for循环" class="headerlink" title="（五）for循环"></a>（五）for循环</h3><h4 id="1-语法-1"><a href="#1-语法-1" class="headerlink" title="1.语法"></a>1.语法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(初始化表达式A; 条件B; 条件改变表达式C)&#123;</span><br><span class="line">    循环体D</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(初始化表达式A; 条件B; )&#123;</span><br><span class="line">    循环体D;</span><br><span class="line">    条件改变表达式C;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">初始化表达式A;</span><br><span class="line"><span class="keyword">for</span>( ; 条件B; )&#123;</span><br><span class="line">    循环体D;</span><br><span class="line">    条件改变表达式C;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="2-执行顺序-1"><a href="#2-执行顺序-1" class="headerlink" title="2.执行顺序"></a>2.执行顺序</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(初始化表达式A; 条件B; 条件改变表达式C)&#123;</span><br><span class="line">    循环体D</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>初始化表达式A</li>
<li>判断条件B，如果条件成立<ul>
<li>执行循环体D</li>
<li>条件改变表达式C</li>
<li>判断条件B—循环</li>
</ul>
</li>
<li>判断条件B，如果条件不成立<ul>
<li>循环结束</li>
</ul>
</li>
</ul>
<h4 id="3-关键字"><a href="#3-关键字" class="headerlink" title="3.关键字"></a>3.关键字</h4><ul>
<li>break 结束最近的循环</li>
<li>continue 终止当前循环体，进行下次循环</li>
</ul>
<hr>
<h2 id="五、数组"><a href="#五、数组" class="headerlink" title="五、数组"></a>五、数组</h2><h3 id="（一）创建"><a href="#（一）创建" class="headerlink" title="（一）创建"></a>（一）创建</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [item1, item2, ...]</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>(length)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>(item1, item2, ...)</span><br></pre></td></tr></table></figure>

<h3 id="（二）本质"><a href="#（二）本质" class="headerlink" title="（二）本质"></a>（二）本质</h3><ul>
<li>数组的本质是一个特殊的对象</li>
<li>数组访问使用下标（索引）属性表达式 arr[“0”] 或 arr[0]（数字会自动转换为字符串）</li>
<li>数组的下标正常情况下是连续的，从0开始到length-1</li>
<li>数组的length属性会自动变化，为最大下标+1</li>
<li>数组的length属性手动赋值，可能会导致数组截断（不建议使用）</li>
</ul>
<h3 id="（三）操作"><a href="#（三）操作" class="headerlink" title="（三）操作"></a>（三）操作</h3><h4 id="1-增"><a href="#1-增" class="headerlink" title="1.增"></a>1.增</h4><h5 id="（1）向数组末尾添加一项"><a href="#（1）向数组末尾添加一项" class="headerlink" title="（1）向数组末尾添加一项"></a>（1）向数组末尾添加一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr[arr.length] = 数据</span><br><span class="line"></span><br><span class="line">arr.push(数据)</span><br></pre></td></tr></table></figure>
<ul>
<li>arr[arr.length]可读性不强（不推荐）</li>
<li>可同时添加多项数据</li>
</ul>
<h5 id="（2）向数组开头添加一项"><a href="#（2）向数组开头添加一项" class="headerlink" title="（2）向数组开头添加一项"></a>（2）向数组开头添加一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.unshift(数据)</span><br></pre></td></tr></table></figure>
<ul>
<li>每一项的下标依次后移</li>
<li>可同时添加多项数据</li>
</ul>
<h5 id="（3）向数组指定位置添加一项"><a href="#（3）向数组指定位置添加一项" class="headerlink" title="（3）向数组指定位置添加一项"></a>（3）向数组指定位置添加一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.splice(index, <span class="number">0</span>, 数据)</span><br></pre></td></tr></table></figure>
<ul>
<li>从指定index位置开始，删除0项，然后在该位置插入数据</li>
<li>如果index超出范围，则按照数组范围的边界进行处理</li>
<li> 如果index是负数，则从数组末尾开始反计算</li>
</ul>
<hr>
<h4 id="2-删"><a href="#2-删" class="headerlink" title="2.删"></a>2.删</h4><h5 id="（1）删除数组最后一项"><a href="#（1）删除数组最后一项" class="headerlink" title="（1）删除数组最后一项"></a>（1）删除数组最后一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.pop()</span><br></pre></td></tr></table></figure>
<ul>
<li>一次只能删除一项</li>
<li>返回删除项（没有返回undefined）</li>
</ul>
<h5 id="（2）删除数组第一项"><a href="#（2）删除数组第一项" class="headerlink" title="（2）删除数组第一项"></a>（2）删除数组第一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.shift()</span><br></pre></td></tr></table></figure>
<ul>
<li>每一项的下标依次前移</li>
<li>一次只能删除一项</li>
<li>返回删除项（没有返回undefined）</li>
</ul>
<h5 id="（3）删除数组指定位置项"><a href="#（3）删除数组指定位置项" class="headerlink" title="（3）删除数组指定位置项"></a>（3）删除数组指定位置项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">delete</span> arr[index]</span><br><span class="line"></span><br><span class="line">arr.splice(index, n)</span><br></pre></td></tr></table></figure>
<ul>
<li>delete删除指定index位置的数据，会导致稀松数组（下标不连续，不利于遍历）</li>
<li>从数组index位置开始，删除n项，返回一个新数组，包含删除项（没有返回空数组）</li>
</ul>
<hr>
<h4 id="3-常用操作"><a href="#3-常用操作" class="headerlink" title="3.常用操作"></a>3.常用操作</h4><h5 id="（1）数组填充指定数据"><a href="#（1）数组填充指定数据" class="headerlink" title="（1）数组填充指定数据"></a>（1）数组填充指定数据</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.fill(数据, start, end)</span><br></pre></td></tr></table></figure>
<ul>
<li>如果start和end都不指定，则全部填充</li>
<li>如果end不指定，则从start开始，一直到结束</li>
</ul>
<h5 id="（2）克隆数组的指定片段"><a href="#（2）克隆数组的指定片段" class="headerlink" title="（2）克隆数组的指定片段"></a>（2）克隆数组的指定片段</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> newArr = arr.slice(start, end)</span><br></pre></td></tr></table></figure>
<ul>
<li>如果start和end都不指定，则全部克隆</li>
<li>如果end不指定，则从start开始，一直到结束</li>
<li>不影响原数组</li>
</ul>
<h5 id="（3）数组清空"><a href="#（3）数组清空" class="headerlink" title="（3）数组清空"></a>（3）数组清空</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr.length = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">0</span>, arr.length)</span><br></pre></td></tr></table></figure>

<h5 id="（4）检索指定数据的下标"><a href="#（4）检索指定数据的下标" class="headerlink" title="（4）检索指定数据的下标"></a>（4）检索指定数据的下标</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.indexOf(数据)</span><br></pre></td></tr></table></figure>
<ul>
<li>返回第一个检索到的下标</li>
<li>没有返回-1</li>
<li>严格执行===</li>
<li>lastIndexOf() 逆序检索</li>
</ul>
<h5 id="（5）in关键字"><a href="#（5）in关键字" class="headerlink" title="（5）in关键字"></a>（5）in关键字</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">a <span class="keyword">in</span> obj</span><br><span class="line">b <span class="keyword">in</span> arr</span><br></pre></td></tr></table></figure>
<ul>
<li>检索obj中有没有a属性</li>
<li>检索arr中有没有a索引</li>
<li>检索到返回true，否则返回false</li>
</ul>
<h5 id="（6）for-in循环"><a href="#（6）for-in循环" class="headerlink" title="（6）for-in循环"></a>（6）for-in循环</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> prop <span class="keyword">in</span> obj)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(obj[prop]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> index <span class="keyword">in</span> arr)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(arr[index]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>依次遍历obj的属性，将属性名赋值给prop变量，执行循环体（遍历对象）</li>
<li>依次遍历arr的下标，将下标赋值给index变量，执行循环体（遍历数组）</li>
<li>==for循环与for-in循环的区别==<ul>
<li>for循环，会把稀松数组的每一项都遍历到</li>
<li>for-in循环，稀松数组的空项不会遍历到</li>
</ul>
</li>
</ul>
<h5 id="（7）拼接数组项"><a href="#（7）拼接数组项" class="headerlink" title="（7）拼接数组项"></a>（7）拼接数组项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.join(分隔符) </span><br></pre></td></tr></table></figure>
<ul>
<li>拼接数组每一项，每一项之间用指定分隔符连接，返回字符串</li>
<li>若分隔符未指定，默认为逗号</li>
</ul>
<h5 id="（8）拼接数组"><a href="#（8）拼接数组" class="headerlink" title="（8）拼接数组"></a>（8）拼接数组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="keyword">new</span> arr = arr1.concat(arr2)</span><br></pre></td></tr></table></figure>
<ul>
<li>将arr1和arr2拼接成一个新数组并返回</li>
<li>不会影响原数组</li>
</ul>
<h4 id="4-二维数组"><a href="#4-二维数组" class="headerlink" title="4.二维数组"></a>4.二维数组</h4><ul>
<li>数组的每一项又是一个数组</li>
</ul>
<hr>
<h2 id="六、函数"><a href="#六、函数" class="headerlink" title="六、函数"></a>六、函数</h2><h3 id="（一）语法"><a href="#（一）语法" class="headerlink" title="（一）语法"></a>（一）语法</h3><h4 id="1-函数声明（字面量）"><a href="#1-函数声明（字面量）" class="headerlink" title="1.函数声明（字面量）"></a>1.函数声明（字面量）</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;<span class="keyword">return</span>&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>声明关键字function</li>
<li>函数名fn</li>
<li>参数列表()</li>
<li>函数体{}</li>
<li>返回值return</li>
</ul>
<h4 id="2-函数调用"><a href="#2-函数调用" class="headerlink" title="2.函数调用"></a>2.函数调用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fn()</span><br></pre></td></tr></table></figure>
<ul>
<li>函数名</li>
<li>执行操作符()</li>
</ul>
<h4 id="3-函数声明提升"><a href="#3-函数声明提升" class="headerlink" title="3.函数声明提升"></a>3.函数声明提升</h4><ul>
<li>与变量声明提升一样</li>
<li>函数字面量声明会将函数名提升至脚本快顶部</li>
<li>通过字面量声明的函数将会成为全局对象的属性</li>
</ul>
<h4 id="4-局部变量"><a href="#4-局部变量" class="headerlink" title="4.局部变量"></a>4.局部变量</h4><ul>
<li>在函数体内用var关键字声明的变量为局部变量</li>
<li>在函数体内直接给一个未声明的变量赋值，此变量会成为全局变量</li>
<li>局部变量声明会提升至函数顶部，函数外部不可见</li>
</ul>
<h4 id="5-参数"><a href="#5-参数" class="headerlink" title="5.参数"></a>5.参数</h4><ul>
<li>功能实现的未知条件为参数</li>
<li>形参：在函数声明时在（）内定义参数</li>
<li>实参：在函数调用时通过（）实现给函数形参对应传递参数</li>
<li>参数的作用域为局部作用域，只在函数体内可见</li>
<li>没有实参对应的形参为undefined</li>
</ul>
<h4 id="6-返回值"><a href="#6-返回值" class="headerlink" title="6.返回值"></a>6.返回值</h4><ul>
<li>函数执行后返回一个结果为返回值</li>
<li>返回值可以自定义</li>
<li>return之后函数即结束，会忽略return语句之后的其它语句</li>
<li>如果函数没有自定义return语句，则会默认返回undefined</li>
</ul>
<h4 id="7-文档注释"><a href="#7-文档注释" class="headerlink" title="7.文档注释"></a>7.文档注释</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 变量：说明</span></span><br><span class="line"><span class="comment"> * 函数：说明</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param<span class="type">&#123;类型&#125;</span></span>a 参数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@returns<span class="type">&#123;类型&#125;</span></span>b 返回值</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>
<ul>
<li>文档注释不会执行</li>
<li>文档注释可以很好的给变量、函数进行说明，在使用时能给予使用者做很好的提示</li>
</ul>
<hr>
<h3 id="（二）特性"><a href="#（二）特性" class="headerlink" title="（二）特性"></a>（二）特性</h3><h4 id="1-作用域"><a href="#1-作用域" class="headerlink" title="1.作用域"></a>1.作用域</h4><h5 id="（1）全局作用域"><a href="#（1）全局作用域" class="headerlink" title="（1）全局作用域"></a>（1）全局作用域</h5><ul>
<li>在全局作用域中声明的变量会被提升到脚本块的顶部，并且会成为全局对象的属性</li>
<li>全局作用域中只能使用全局变量（函数）</li>
</ul>
<h5 id="（2）局部作用域（函数作用域）"><a href="#（2）局部作用域（函数作用域）" class="headerlink" title="（2）局部作用域（函数作用域）"></a>（2）局部作用域（函数作用域）</h5><ul>
<li>在局部作用域中声明的变量会被提升到函数的顶部，并且不会成为全局对象的属性</li>
<li>局部变量不会污染全局变量</li>
<li>局部作用域不仅可以使用内部变量（函数），还可以使用外部环境的变量（函数）</li>
<li>==当内部变量和外部变量冲突时，使用内部变量==</li>
</ul>
<h5 id="（3）闭包-closure"><a href="#（3）闭包-closure" class="headerlink" title="（3）闭包 closure"></a>（3）闭包 closure</h5><ul>
<li>闭包是一种现象，内部函数可以使用外部环境的变量</li>
</ul>
<h4 id="2-函数表达式"><a href="#2-函数表达式" class="headerlink" title="2.函数表达式"></a>2.函数表达式</h4><h5 id="1-立即执行函数"><a href="#1-立即执行函数" class="headerlink" title="(1)立即执行函数"></a>(1)立即执行函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;&#125;)();</span><br></pre></td></tr></table></figure>
<ul>
<li>==当函数成为一个表达式时，既不会提升，也不会污染全局对象==</li>
<li>将函数变成函数表达式之一的方法是用小括号将函数括起来，但是声明即结束，之后无法调用</li>
<li>将这种形式的函数表达式返回函数本身，即可以加执行符号立即执行，称之为<strong>立即执行函数 IIFE</strong></li>
<li>第一个小括号将函数变成表达式，返回函数本身</li>
<li>第二个小括号将函数立即执行，返回执行结果</li>
</ul>
<h5 id="2-匿名函数"><a href="#2-匿名函数" class="headerlink" title="(2)匿名函数"></a>(2)匿名函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;&#125;)();</span><br></pre></td></tr></table></figure>
<ul>
<li>函数表达式的函数名没有意义，可以省略，称之为<strong>匿名函数</strong></li>
</ul>
<h5 id="3-函数引用"><a href="#3-函数引用" class="headerlink" title="(3)函数引用"></a>(3)函数引用</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">fn</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;]</span><br></pre></td></tr></table></figure>
<ul>
<li>函数也是一种引用数据，可以赋值给变量/属性</li>
<li>变量保存的是对函数的地址引用</li>
</ul>
<h5 id="4-回调函数"><a href="#4-回调函数" class="headerlink" title="(4)回调函数"></a>(4)回调函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn1 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fn2 = <span class="function"><span class="keyword">function</span> (<span class="params">call</span>)</span>&#123;call()&#125;;</span><br><span class="line"></span><br><span class="line">fn2(fn1)</span><br></pre></td></tr></table></figure>
<ul>
<li>将函数做为参数传递给另一个函数使用，称之为<strong>回调函数</strong></li>
</ul>
<h4 id="3-this关键字"><a href="#3-this关键字" class="headerlink" title="3.this关键字"></a>3.this关键字</h4><ul>
<li>在全局环境作用域中，this指代全局对象</li>
<li>在函数作用域中<ul>
<li>直接调用：this指代全局对象</li>
<li>对象调用：this指代调用对象</li>
</ul>
</li>
</ul>
<hr>
<h3 id="（三）构造函数"><a href="#（三）构造函数" class="headerlink" title="（三）构造函数"></a>（三）构造函数</h3><h4 id="1-普通函数创建对象"><a href="#1-普通函数创建对象" class="headerlink" title="1.普通函数创建对象"></a>1.普通函数创建对象</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">CreateUser</span>(<span class="params">name, age</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    name,</span><br><span class="line">    age,</span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`我的名字是<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> user1 = CreateUser(<span class="string">&quot;huafu&quot;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> user2 = CreateUser(<span class="string">&quot;zhang&quot;</span>, <span class="number">40</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>用函数创建对象可以减少繁琐的对象创建流程</li>
<li>函数可以返回任意的返回值，可用于返回一个对象</li>
</ul>
<h4 id="2-构造函数"><a href="#2-构造函数" class="headerlink" title="2.构造函数"></a>2.构造函数</h4><h5 id="（1）语法"><a href="#（1）语法" class="headerlink" title="（1）语法"></a>（1）语法</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">User</span>(<span class="params">name, age</span>)</span>&#123;</span><br><span class="line">  <span class="comment">// this = &#123;&#125;</span></span><br><span class="line">  <span class="built_in">this</span>.name = name;</span><br><span class="line">  <span class="built_in">this</span>.age = age;</span><br><span class="line">  <span class="built_in">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`我的名字是<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// return this</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> user1 = <span class="keyword">new</span> User(<span class="string">&quot;huafu&quot;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> user2 = <span class="keyword">new</span> User(<span class="string">&quot;zhang&quot;</span>, <span class="number">40</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>构造函数命名规约：大驼峰、尽量不使用动词</li>
<li>new关键字来调用构造函数创建对象</li>
<li>this默认指向新创建的对象</li>
</ul>
<h5 id="（2）返回值"><a href="#（2）返回值" class="headerlink" title="（2）返回值"></a>（2）返回值</h5><ul>
<li>默认隐式返回一个新对象</li>
<li>如果显式返回值<ul>
<li>返回值是原始类型：直接忽略，默认返回</li>
<li>返回值是引用类型：覆盖默认返回</li>
</ul>
</li>
</ul>
<h5 id="（3）原理"><a href="#（3）原理" class="headerlink" title="（3）原理"></a>（3）原理</h5><ul>
<li>第一步隐式创建了this = {}; </li>
<li>最后一步隐式返回了this这个对象</li>
</ul>
<h5 id="（4）new-target"><a href="#（4）new-target" class="headerlink" title="（4）new.target"></a>（4）new.target</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">User</span>(<span class="params">name, age</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">new</span>.target === User)&#123;</span><br><span class="line">    <span class="comment">// this = &#123;&#125;</span></span><br><span class="line">    <span class="built_in">this</span>.name = name;</span><br><span class="line">    <span class="built_in">this</span>.age = age;</span><br><span class="line">    <span class="built_in">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`我的名字是<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// return this</span></span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      name,</span><br><span class="line">      age,</span><br><span class="line">      <span class="function"><span class="title">say</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`我的名字是<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> user1 = <span class="keyword">new</span> User(<span class="string">&quot;huafu&quot;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> user2 = User(<span class="string">&quot;zhang&quot;</span>, <span class="number">40</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>构造函数通过new调用，new.target指向构造函数本身</li>
<li>构造函数没通过new调用，new.target为undefined</li>
</ul>
<hr>
<h3 id="（四）本质"><a href="#（四）本质" class="headerlink" title="（四）本质"></a>（四）本质</h3><h4 id="1-函数的本质就是对象"><a href="#1-函数的本质就是对象" class="headerlink" title="1.函数的本质就是对象"></a>1.函数的本质就是对象</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">a, b</span>)</span>&#123;<span class="keyword">return</span> a + b&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> sum = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">&quot;a&quot;</span>, <span class="string">&quot;b&quot;</span>, <span class="string">&quot;return a + b&quot;</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>所有的对象都是通过构造函数创建的，使用new关键字</li>
<li>函数的本质就是对象，自然也是构造函数创建，可以使用new操作符</li>
<li>实际上，所有的函数都是构造函数创建的</li>
<li>这样构造函数是js引擎启动时就已经创建好</li>
<li>new Function()创建的是函数</li>
<li>new 自定义函数()创建的是对象</li>
</ul>
<h4 id="2-函数的属性"><a href="#2-函数的属性" class="headerlink" title="2.函数的属性"></a>2.函数的属性</h4><ul>
<li>函数的本质是对象，自然也可以拥有属性</li>
</ul>
<h4 id="3-包装类"><a href="#3-包装类" class="headerlink" title="3.包装类"></a>3.包装类</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">123</span>;</span><br><span class="line">a = <span class="number">3.14159</span>;</span><br><span class="line">a.toFixed(<span class="number">2</span>);   <span class="comment">// (new Number(a)).toFixed(2)</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Boolean</span></span><br><span class="line"><span class="built_in">String</span></span><br><span class="line"><span class="built_in">Number</span></span><br></pre></td></tr></table></figure>
<ul>
<li>js为了增强原始类型的功能，为boolean、string、number分别创建了一个构造函数</li>
<li>如果语法上，将原始类型当做对象使用（一般是使用属性），js会自动的在该位置利用对应的构造函数，创建对象来访问原始类型的属性</li>
<li>在js中类就相当于构造函数</li>
<li>成员/实例方法（属性）：通过构造函数创建的对象调用</li>
<li>静态/类方法（属性）：通过构造函数调用</li>
</ul>
<hr>
<h3 id="（五）递归"><a href="#（五）递归" class="headerlink" title="（五）递归"></a>（五）递归</h3><h4 id="1-概念-1"><a href="#1-概念-1" class="headerlink" title="1.概念"></a>1.概念</h4><ul>
<li>在函数内部直接或间接调用自身</li>
</ul>
<h4 id="2-执行栈"><a href="#2-执行栈" class="headerlink" title="2.执行栈"></a>2.执行栈</h4><ul>
<li>任何代码的执行都必须有一个执行环境，执行环境为代码的执行提供支持</li>
<li>执行环境会放到执行栈中</li>
<li>函数每次执行都会创建一个新的执行环境，执行完毕即销毁</li>
<li>执行栈的空间大小有限，执行环境过多可能导致执行栈溢出</li>
</ul>
<h4 id="3-无限递归与死循环"><a href="#3-无限递归与死循环" class="headerlink" title="3.无限递归与死循环"></a>3.无限递归与死循环</h4><ul>
<li>无限递归，函数每次调用都会产生新环境，所以会导致栈溢出报错</li>
<li>死循环每次循环并不会产生新环境，也不会导致栈溢出，会导致卡死</li>
</ul>
<h4 id="4-尾递归"><a href="#4-尾递归" class="headerlink" title="4.尾递归"></a>4.尾递归</h4><ul>
<li>如果一个函数最后一条语句是调用函数，并且调用函数不是表达式的一部分，则该语句称之为尾调用，如若尾调用是调用函数自身称之为尾递归</li>
<li>某些语言或执行环境会对尾调用进行优化，它们会理解销毁当前函数，避免执行栈空间被占用</li>
<li>在浏览器环境中没有优化</li>
<li>在node环境中有优化</li>
</ul>
<hr>
<h2 id="七、标准库"><a href="#七、标准库" class="headerlink" title="七、标准库"></a>七、标准库</h2><h3 id="（一）Object（构造函数）"><a href="#（一）Object（构造函数）" class="headerlink" title="（一）Object（构造函数）"></a>（一）Object（构造函数）</h3><h4 id="1-静态成员"><a href="#1-静态成员" class="headerlink" title="1.静态成员"></a>1.静态成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Object.keys(obj)</strong></td>
<td align="left">方法</td>
<td align="left">{Object}</td>
<td align="left">可枚举的属性</td>
<td align="left">{Array&lt;string&gt;}</td>
</tr>
<tr>
<td align="left"><strong>Object.values(obj)</strong></td>
<td align="left">方法</td>
<td align="left">{Object}</td>
<td align="left">可枚举的属性值</td>
<td align="left">{Array&lt;T&gt;}</td>
</tr>
<tr>
<td align="left"><strong>Object.entries(obj)</strong></td>
<td align="left">方法</td>
<td align="left">{Object}</td>
<td align="left">可枚举的属性/属性值</td>
<td align="left">{Array&lt;Array&gt;}</td>
</tr>
</tbody></table>
<h4 id="2-实例成员"><a href="#2-实例成员" class="headerlink" title="2.实例成员"></a>2.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>obj.toString()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">转换为字符串</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>obj.valueOf()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">返回自身</td>
<td align="left">{Object}</td>
</tr>
</tbody></table>
<ul>
<li>实例成员可重写属性或方法</li>
<li>自动类型转换的本质<ul>
<li>先调用valueOf()得到结果<ul>
<li>如果结果是原始类型，则该结果就是最终结果</li>
<li>如果结果是引用类型，则该结果再调用toString()得到最终结果</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h3 id="（二）Function（构造函数）"><a href="#（二）Function（构造函数）" class="headerlink" title="（二）Function（构造函数）"></a>（二）Function（构造函数）</h3><h4 id="1-特性"><a href="#1-特性" class="headerlink" title="1.特性"></a>1.特性</h4><ul>
<li>所有函数都具有Function中的实例成员</li>
<li>arguments（==类数组==）在函数中使用，得到函数调用时的实参列表</li>
<li>arguments 会与实参列表一一映射（一个改变对应另一个也改变）</li>
</ul>
<h4 id="2-实例成员-1"><a href="#2-实例成员-1" class="headerlink" title="2.实例成员"></a>2.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>fn.length</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">获取形参数量</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>fn.call()</strong></td>
<td align="left">方法</td>
<td align="left">{obj, Array&lt;T&gt;}</td>
<td align="left">临时改变this指向，调用函数</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>fn.apply()</strong></td>
<td align="left">方法</td>
<td align="left">{obj, T}</td>
<td align="left">临时改变this指向，调用函数</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>fn.bind()</strong></td>
<td align="left">方法</td>
<td align="left">{obj, T}</td>
<td align="left">永久绑定this指向，不调用函数，返回新函数</td>
<td align="left">{Function}</td>
</tr>
</tbody></table>
<hr>
<h3 id="（三）Array（构造函数）"><a href="#（三）Array（构造函数）" class="headerlink" title="（三）Array（构造函数）"></a>（三）Array（构造函数）</h3><h4 id="1-静态成员-1"><a href="#1-静态成员-1" class="headerlink" title="1.静态成员"></a>1.静态成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Array.form()</strong></td>
<td align="left">方法</td>
<td align="left">{类数组}</td>
<td align="left">将类数组转换为数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>Array.isArray()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">判定数组</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>Array.of()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">用指定数据创建数组</td>
<td align="left">{Array}</td>
</tr>
</tbody></table>
<h4 id="2-实例成员-2"><a href="#2-实例成员-2" class="headerlink" title="2.实例成员"></a>2.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>arr.fill()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start, end}</td>
<td align="left">用指定数据填充数组，返回当前数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.slice()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start, end}</td>
<td align="left">复制指定的数组片段，返回新数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.pop()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">删除数组尾项，返回删除项</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>arr.shift()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">删除数组首项，返回删除项</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>arr.push()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">在数组尾部添加数据，返回当前数组新length</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.unshift()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">在数组首部添加数据，返回当前数组新length</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.reverse()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">将数组颠倒顺序，返回当前数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.sort()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(a, b){}}</td>
<td align="left">对数组进行排序/乱序，返回当前数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.concat()</strong></td>
<td align="left">方法</td>
<td align="left">{Array}</td>
<td align="left">对数组进行合并，返回新数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.includes()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start}</td>
<td align="left">查询指定数据（严格相等）,返回true/false</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>arr.indexOf()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start}</td>
<td align="left">顺序查询指定数据（严格相等）,返回index</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.lastIndexOf()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start}</td>
<td align="left">逆序查询指定数据（严格相等）,返回index</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.join()</strong></td>
<td align="left">方法</td>
<td align="left">{连接符}</td>
<td align="left">将数组项以指定连接符进行拼接成字符串并返回</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>arr.forEach()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">遍历数组</td>
<td align="left">{undefined}</td>
</tr>
<tr>
<td align="left"><strong>arr.every()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">遍历数组，是否每一项都满足条件</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>arr.some()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">遍历数组，是否有一项满足条件</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>arr.filter()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">遍历数组，筛选满足条件的所有元素并返回</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.find()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">顺序查询满足条件的第一个元素并返回</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>arr.findIndex()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">顺序查询满足条件的第一个元素的下标并返回</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.map()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">将数组每一项映射成为指定条件的数据并返回</td>
<td align="left">{Array&lt;Object&gt;}</td>
</tr>
<tr>
<td align="left"><strong>arr.reduce()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(a, b){}, first}</td>
<td align="left">将数组每两项为一个结果进行累计迭代并返回最后一次迭代的结果</td>
<td align="left">{T}</td>
</tr>
</tbody></table>
<hr>
<h3 id="（四）Number（构造函数）"><a href="#（四）Number（构造函数）" class="headerlink" title="（四）Number（构造函数）"></a>（四）Number（构造函数）</h3><h4 id="1-特性-1"><a href="#1-特性-1" class="headerlink" title="1.特性"></a>1.特性</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Number</span>()</span><br><span class="line"></span><br><span class="line"><span class="built_in">Number</span>()</span><br></pre></td></tr></table></figure>
<ul>
<li>类型转换</li>
<li>用new调用返回对象</li>
<li>直接调用返回的是原始值</li>
</ul>
<h4 id="2-静态成员"><a href="#2-静态成员" class="headerlink" title="2.静态成员"></a>2.静态成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Number.isNaN()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">判定NaN</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>Number.isFinite()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">判定Infinity</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>Number.isInteger()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">判定整数</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>Number.parseInt()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">转化为整数</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Number.parseFloat()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">转换为小数</td>
<td align="left">{number}</td>
</tr>
</tbody></table>
<ul>
<li>parseInt参数为字符串，若不是字符串，会先转换为字符串，再进行转换为整数</li>
<li>parseInt从左往右看从第一个有效数字开始到第一个非有效数字字符结束，忽略两边的空白字符，直接舍弃小数部分，转换不了返回NaN</li>
<li>parseInt可选第二位参数，用于指定参数的进制（2-32），参数与进制不符，会取开端符合进制的部分，舍弃不符部分，取不到则返回NaN</li>
<li>parseInt的返回值为十进制</li>
</ul>
<h4 id="3-实例成员"><a href="#3-实例成员" class="headerlink" title="3.实例成员"></a>3.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>num.toFixed()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">保留指定小数位数，返回数字字符串（四舍五入）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>num.toPrecision()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">保留指定精度，返回数字字符串</td>
<td align="left">{string}</td>
</tr>
</tbody></table>
<hr>
<h3 id="（五）Boolean（构造函数）"><a href="#（五）Boolean（构造函数）" class="headerlink" title="（五）Boolean（构造函数）"></a>（五）Boolean（构造函数）</h3><ul>
<li>0、””、false、undefined、null、NaN 判定为假</li>
<li>其它判定为真 Boolean(“false”) ==&gt; true</li>
</ul>
<hr>
<h3 id="（六）String（构造函数）"><a href="#（六）String（构造函数）" class="headerlink" title="（六）String（构造函数）"></a>（六）String（构造函数）</h3><h4 id="1-静态成员-2"><a href="#1-静态成员-2" class="headerlink" title="1.静态成员"></a>1.静态成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>String.fromCharCode()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">用Unicode编码创建字符</td>
<td align="left">{string}</td>
</tr>
</tbody></table>
<ul>
<li>参数取值范围0-65535</li>
<li>infinity返回” “;</li>
</ul>
<h4 id="2-实例成员-3"><a href="#2-实例成员-3" class="headerlink" title="2.实例成员"></a>2.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>str.length</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">字符串长度（字符个数）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.charAt()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">取得指定位置的字符</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.charCodeAt()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">取得指定位置的字符的Unicode码</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.concat()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">字符串拼接</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.includes()</strong></td>
<td align="left">方法</td>
<td align="left">{string, start}</td>
<td align="left">检索字符串中是否包含指定字符串</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>str.startsWith()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">检索字符串中是以指定字符串开始</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>str.endsWith()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">检索字符串中是以指定字符串结尾</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>str.indexOf()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">检索字符串中指定字符串首次出现索引</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.lastIndexOf()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">检索字符串中指定字符串末次出现索引</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.padStart()</strong></td>
<td align="left">方法</td>
<td align="left">{length, string}</td>
<td align="left">填充字符串至指定长度（首部填充）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.padEnd()</strong></td>
<td align="left">方法</td>
<td align="left">{length, string}</td>
<td align="left">填充字符串至指定长度（末部填充）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.repeat()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">重复字符串</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.slice()</strong></td>
<td align="left">方法</td>
<td align="left">{start, end}</td>
<td align="left">复制字符串片段（从某个位置取到某个位置）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.substr()</strong></td>
<td align="left">方法</td>
<td align="left">{start, length}</td>
<td align="left">复制字符串片段（从某个位置开始取指定长度）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.substring()</strong></td>
<td align="left">方法</td>
<td align="left">{start, end}</td>
<td align="left">复制字符串片段（从某个位置取到某个位置）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.toLowerCase()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">字符串转换为小写</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.toUpperCase()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">字符串转换为大写</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.trim()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">忽略字符串两端空格</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.trimStart()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">忽略字符串开端空格</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.trimEnd()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">忽略字符串末端空格</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.split()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">将字符串以分隔符拆分成数组</td>
<td align="left">{Array}</td>
</tr>
</tbody></table>
<ul>
<li>字符串是==类数组==</li>
<li>charAt(index) 和 [index]取得指定索引的字符</li>
<li>charAt(index) 中index超出范围返回””;</li>
<li>数组中index超出范围返回undefined</li>
<li>slice、substr参数可为负数，负数时，倒序计算；参数位置不可换</li>
<li>substring参数不可为负数，否则自动转换为0；参数位置可换</li>
</ul>
<hr>
<h3 id="（七）Math（对象）"><a href="#（七）Math（对象）" class="headerlink" title="（七）Math（对象）"></a>（七）Math（对象）</h3><h4 id="1-常量"><a href="#1-常量" class="headerlink" title="1.常量"></a>1.常量</h4><ul>
<li>永远不会变化的数据</li>
<li>命名规约：所有字母大写，多单词下划线连接</li>
</ul>
<h4 id="2-对象成员"><a href="#2-对象成员" class="headerlink" title="2.对象成员"></a>2.对象成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Math.PI</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">圆周率</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.abs()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">绝对值</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.floor()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">向下取整</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.ceil()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">向上取整</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.round()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">四舍五入</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.max()</strong></td>
<td align="left">方法</td>
<td align="left">{number…}</td>
<td align="left">最大值</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.min()</strong></td>
<td align="left">方法</td>
<td align="left">{number…}</td>
<td align="left">最小值</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.random()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">伪随机数</td>
<td align="left">{number}</td>
</tr>
</tbody></table>
<hr>
<h3 id="（八）Date（构造函数）"><a href="#（八）Date（构造函数）" class="headerlink" title="（八）Date（构造函数）"></a>（八）Date（构造函数）</h3><h4 id="1-术语"><a href="#1-术语" class="headerlink" title="1.术语"></a>1.术语</h4><h5 id="（1）时间单位"><a href="#（1）时间单位" class="headerlink" title="（1）时间单位"></a>（1）时间单位</h5><ul>
<li>年：year</li>
<li>月：month</li>
<li>日：date</li>
<li>小时：hour</li>
<li>分钟：minute</li>
<li>秒钟：second</li>
<li>毫秒：millisecond</li>
<li>微妙：microsecond</li>
<li>纳秒：nanosecond</li>
</ul>
<h5 id="（2）UTC和GMT"><a href="#（2）UTC和GMT" class="headerlink" title="（2）UTC和GMT"></a>（2）UTC和GMT</h5><ul>
<li>UTC：世界协调时（原子时，精确到纳秒）</li>
<li>GMT：格林威治世界时（太阳时，精确毫秒）</li>
<li>UTC与GMT时差不超过0.9秒，UTF自动校正</li>
</ul>
<h5 id="（3）时间戳"><a href="#（3）时间戳" class="headerlink" title="（3）时间戳"></a>（3）时间戳</h5><ul>
<li>1970年1月1日0时0分0秒0毫秒起（GMT）</li>
<li>到某个时间所经过的毫秒数</li>
</ul>
<h4 id="2-创建"><a href="#2-创建" class="headerlink" title="2.创建"></a>2.创建</h4><ul>
<li>Date() 直接调用，会忽略参数，返回当前系统时间</li>
<li>new Data()创建日期对象<ul>
<li>一个参数：时间戳</li>
<li>多个参数：年、月、日、时、分、秒、毫秒</li>
</ul>
</li>
</ul>
<h4 id="3-实例成员-1"><a href="#3-实例成员-1" class="headerlink" title="3.实例成员"></a>3.实例成员</h4><h5 id="（1）获取"><a href="#（1）获取" class="headerlink" title="（1）获取"></a>（1）获取</h5><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>d.getTime()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取时间戳</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getFullYear()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取年</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getmonth()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取月（0-11）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getDay()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取周（0-6）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getDate()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取日</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getHours()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取时）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getMinutes()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取分）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getSeconds()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取秒</td>
<td align="left">{number}</td>
</tr>
</tbody></table>
<h5 id="（2）设置"><a href="#（2）设置" class="headerlink" title="（2）设置"></a>（2）设置</h5><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>d.setTime()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置时间戳</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setFullYear()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置年</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setmonth()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置月（0-11）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setDay()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置周（0-6）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setDate()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置日</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setHours()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置时）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setMinutes()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置分）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setSeconds()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置秒</td>
<td align="left">{number}</td>
</tr>
</tbody></table>
<h4 id="4-日期运算"><a href="#4-日期运算" class="headerlink" title="4.日期运算"></a>4.日期运算</h4><ul>
<li>重写了Object中的valueOf方法，返回的是一个数字类型的时间戳</li>
</ul>
<hr>
<h3 id="（九）RegExp（构造函数）"><a href="#（九）RegExp（构造函数）" class="headerlink" title="（九）RegExp（构造函数）"></a>（九）RegExp（构造函数）</h3><h4 id="1-字符"><a href="#1-字符" class="headerlink" title="1.字符"></a>1.字符</h4><h5 id="（1）字面量"><a href="#（1）字面量" class="headerlink" title="（1）字面量"></a>（1）字面量</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/.../ 匹配直接书写的字符</span><br><span class="line">/ABC/ 匹配ABC字符</span><br></pre></td></tr></table></figure>
<h5 id="（2）特殊字符"><a href="#（2）特殊字符" class="headerlink" title="（2）特殊字符"></a>（2）特殊字符</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /^/ 开始</span><br><span class="line">        /$/ 结束</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /./ 任意字符</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /\n/  n是特殊字符（将特殊字符转换为普通字符）</span><br></pre></td></tr></table></figure>
<h5 id="（3）转义字符"><a href="#（3）转义字符" class="headerlink" title="（3）转义字符"></a>（3）转义字符</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /\n/  换行符</span><br><span class="line">        /\t/  制表符</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /\s/  空白字符</span><br><span class="line">        /\S/  非空白字符</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /\b/  单词边界</span><br><span class="line">        /\B/  非单词边界</span><br><span class="line"></span><br><span class="line">（<span class="number">4</span>）   /\d/  数字[<span class="number">0</span>-<span class="number">9</span>]</span><br><span class="line">        /\D/  非数字[^<span class="number">0</span>-<span class="number">9</span>]</span><br><span class="line"></span><br><span class="line">（<span class="number">5</span>）   /\w/  字母、数字、下划线[A-Za_z0-9_]</span><br><span class="line">        /\W/  非字母、数字、下划线[^A-Za_z0-9_]</span><br><span class="line"></span><br><span class="line">（<span class="number">6</span>）   /\un/ n是四位十六进制的Unicode码</span><br></pre></td></tr></table></figure>
<h5 id="（4）字符集"><a href="#（4）字符集" class="headerlink" title="（4）字符集"></a>（4）字符集</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">/[ABC]/  匹配ABC中任意一位</span><br><span class="line">/[<span class="number">0</span>-<span class="number">9</span>]/  匹配任意一位字符</span><br><span class="line">/^[<span class="number">0</span>-<span class="number">9</span>]/  必须以一位数字开始</span><br><span class="line">/[^<span class="number">0</span>-<span class="number">9</span>]/  非数字</span><br><span class="line">/[\u4E00-\u9FA5]/ 匹配任意一位中文（除生僻字）</span><br></pre></td></tr></table></figure>

<h4 id="2-量词"><a href="#2-量词" class="headerlink" title="2.量词"></a>2.量词</h4><h5 id="（1）特殊字符"><a href="#（1）特殊字符" class="headerlink" title="（1）特殊字符"></a>（1）特殊字符</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /[...]*/ <span class="number">0</span>或多个</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /[...]+/ <span class="number">1</span>或多个</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /[...]?/ <span class="number">0</span>或<span class="number">1</span>个</span><br></pre></td></tr></table></figure>
<h5 id="（2）自定义量词"><a href="#（2）自定义量词" class="headerlink" title="（2）自定义量词"></a>（2）自定义量词</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /[...]&#123;n&#125;/ n个</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /[...]&#123;n,&#125;/ 至少n个</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /[...]&#123;n,m&#125;/ n到m个</span><br></pre></td></tr></table></figure>

<h4 id="3-符号"><a href="#3-符号" class="headerlink" title="3.符号"></a>3.符号</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /|/ 或者</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /()/ 子集（捕获组）</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /[]/ 字符集</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /&#123;&#125;/ 自定义量词</span><br></pre></td></tr></table></figure>

<h4 id="4-创建"><a href="#4-创建" class="headerlink" title="4.创建"></a>4.创建</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/规则/</span>flag</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(规则, flag)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg = <span class="built_in">RegExp</span>(规则, flag)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>reg = /规则/<br>reg1 = new RegExp(reg)<br>reg2 = RegExp(reg)</p>
</blockquote>
<ul>
<li>当用一个正则作为参数创建正则时，用不用new就会有区别<ul>
<li>reg1 === reg ==&gt; false</li>
<li>reg2 === reg ==&gt; true</li>
</ul>
</li>
<li>flag<ul>
<li>g 全局匹配</li>
<li>i 忽略大小写</li>
<li>m 多行匹配</li>
</ul>
</li>
</ul>
<hr>
<h4 id="5-实例成员"><a href="#5-实例成员" class="headerlink" title="5.实例成员"></a>5.实例成员</h4><h5 id="（1）正则"><a href="#（1）正则" class="headerlink" title="（1）正则"></a>（1）正则</h5><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>reg.global</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">是否开启全局</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>reg.ignoreCase</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">是否开启忽略大小写</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>reg.multiline</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">是否开启多行</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>reg.source</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">当前规则</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>reg.lastIndex</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">匹配位置</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>reg.test()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">是否匹配到</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>reg.exec()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">匹配到的结果</td>
<td align="left">{Array&lt;string&gt;}</td>
</tr>
</tbody></table>
<ul>
<li>test当开启全局匹配的时候受lastIndex属性控制匹配位置</li>
<li>exec当开启全局匹配的时候受lastIndex属性控制匹配位置<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;aaa&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/a+/g</span>;   贪婪模式 ==&gt; <span class="string">&quot;aaa&quot;</span></span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/a+?/g</span>;  非贪婪模式 ==&gt; <span class="string">&quot;a&quot;</span></span><br></pre></td></tr></table></figure></li>
<li>默认匹配模式为贪婪模式（尽可能的多），在量词后加？更改为非贪婪模式</li>
</ul>
<hr>
<h5 id="（2）字符串"><a href="#（2）字符串" class="headerlink" title="（2）字符串"></a>（2）字符串</h5><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>str.search()</strong></td>
<td align="left">方法</td>
<td align="left">{RegExp}</td>
<td align="left">第一次匹配到的index</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.match()</strong></td>
<td align="left">方法</td>
<td align="left">{RegExp}</td>
<td align="left">匹配到的结果</td>
<td align="left">{Array&lt;string&gt;}</td>
</tr>
<tr>
<td align="left"><strong>str.split()</strong></td>
<td align="left">方法</td>
<td align="left">{RegExp}</td>
<td align="left">按正则分隔字符串</td>
<td align="left">{Array&lt;string&gt;}</td>
</tr>
<tr>
<td align="left"><strong>str.replace()</strong></td>
<td align="left">方法</td>
<td align="left">{RegExp, string|function}</td>
<td align="left">按正则替换指定字符并返回新字符串</td>
<td align="left">{string}</td>
</tr>
</tbody></table>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;hello world&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr = str.replace(<span class="regexp">/\s*\b[a-z]\s*/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params">match</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> match.toUpperCase().trim();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>replace替换可以使用函数<ul>
<li>match为匹配到的内容</li>
<li>return返回值为替换的内容</li>
</ul>
</li>
</ul>
<hr>
<h4 id="6-捕获组"><a href="#6-捕获组" class="headerlink" title="6.捕获组"></a>6.捕获组</h4><h5 id="（1）匿名捕获组"><a href="#（1）匿名捕获组" class="headerlink" title="（1）匿名捕获组"></a>（1）匿名捕获组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/(《[\u4e00-\u9fa5]+》)[\u4e00-\u9fa5]+(\d&#123;4&#125;年\d&#123;1,2&#125;月\d&#123;1,2&#125;日)[\u4e00-\u9fa5]+/gim</span>;</span><br><span class="line"></span><br><span class="line">reg.exec(str) ==&gt; </span><br><span class="line"></span><br><span class="line"><span class="number">0</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行&quot;</span></span><br><span class="line"><span class="number">1</span>: <span class="string">&quot;《中华人民共和国安全生产法》&quot;</span></span><br><span class="line"><span class="number">2</span>: <span class="string">&quot;2002年11月1日&quot;</span></span><br><span class="line"><span class="attr">groups</span>: <span class="literal">undefined</span></span><br><span class="line"><span class="attr">index</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">input</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="attr">length</span>: <span class="number">3</span></span><br></pre></td></tr></table></figure>
<ul>
<li>一个()代表一个捕获组，从左往右一次计算（例子中有2个捕获组）</li>
<li>当()发生嵌套的时候，从左往右，从外层往内层计算</li>
<li>匹配的结果返回的数组中，从index[1]位开始一次对应捕获组匹配的子集<ul>
<li>[0]代表匹配到的结果</li>
<li>[1]代表从左往右第一个()捕获组的内容</li>
<li>[2]代表从左往右第二个()捕获组的内容</li>
</ul>
</li>
</ul>
<h5 id="（2）具名捕获组"><a href="#（2）具名捕获组" class="headerlink" title="（2）具名捕获组"></a>（2）具名捕获组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/(?&lt;name&gt;《[\u4e00-\u9fa5]+》)[\u4e00-\u9fa5]+(?&lt;time&gt;\d&#123;4&#125;年\d&#123;1,2&#125;月\d&#123;1,2&#125;日)[\u4e00-\u9fa5]+/gim</span>;</span><br><span class="line"></span><br><span class="line">reg.exec(str) ==&gt; </span><br><span class="line"></span><br><span class="line"><span class="number">0</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行&quot;</span></span><br><span class="line"><span class="number">1</span>: <span class="string">&quot;《中华人民共和国安全生产法》&quot;</span></span><br><span class="line"><span class="number">2</span>: <span class="string">&quot;2002年11月1日&quot;</span></span><br><span class="line"><span class="attr">groups</span>: &#123;<span class="attr">name</span>: <span class="string">&quot;《中华人民共和国安全生产法》&quot;</span>, <span class="attr">time</span>: <span class="string">&quot;2002年11月1日&quot;</span>&#125;</span><br><span class="line"><span class="attr">index</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">input</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="attr">length</span>: <span class="number">3</span></span><br></pre></td></tr></table></figure>
<ul>
<li>一个()代表一个捕获组，以 ==<strong>（ ？&lt;name&gt;</strong>== 的形式给当前()捕获组命名</li>
<li>具名捕获组会对应到返回结果的数组属性groups对象中<ul>
<li>命名为属性名</li>
<li>捕获组内容为属性值</li>
</ul>
</li>
</ul>
<h5 id="（3）非捕获组"><a href="#（3）非捕获组" class="headerlink" title="（3）非捕获组"></a>（3）非捕获组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/(?:《[\u4e00-\u9fa5]+》)[\u4e00-\u9fa5]+(?&lt;time&gt;\d&#123;4&#125;年\d&#123;1,2&#125;月\d&#123;1,2&#125;日)[\u4e00-\u9fa5]+/gim</span>;</span><br><span class="line"></span><br><span class="line">reg.exec(str) ==&gt; </span><br><span class="line"></span><br><span class="line"><span class="number">0</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行&quot;</span></span><br><span class="line"><span class="number">1</span>: <span class="string">&quot;2002年11月1日&quot;</span></span><br><span class="line"><span class="attr">groups</span>: &#123;<span class="attr">time</span>: <span class="string">&quot;2002年11月1日&quot;</span>&#125;</span><br><span class="line"><span class="attr">index</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">input</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="attr">length</span>: <span class="number">3</span></span><br></pre></td></tr></table></figure>
<ul>
<li>一个()代表一个捕获组，以 ==<strong>（ ？：</strong>== 的形式设定当前()为非捕获组</li>
<li>非捕获组不会再捕获子集，节约性能</li>
</ul>
<h5 id="（4）replace运用捕获组"><a href="#（4）replace运用捕获组" class="headerlink" title="（4）replace运用捕获组"></a>（4）replace运用捕获组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">str.replace(reg, <span class="function"><span class="keyword">function</span>(<span class="params">match, g1, g2</span>)</span>&#123;&#125;)</span><br><span class="line"></span><br><span class="line">str.replace(reg, <span class="string">&quot;$1/$2&quot;</span>)</span><br></pre></td></tr></table></figure>
<ul>
<li>replace替换可以使用函数,函数第二个参数开始对应捕获组<ul>
<li>match为匹配到的内容</li>
<li>g1为第一个捕获组的内容</li>
<li>g2为第二个捕获组的内容</li>
<li>return返回值为替换的内容</li>
</ul>
</li>
<li>replace替换可以使用字符串,字符串中的特殊字符$1、$2…对应捕获组<ul>
<li>$1为第一个捕获组的内容</li>
<li>$2为第二个捕获组的内容</li>
</ul>
</li>
</ul>
<h5 id="（5）反向引用"><a href="#（5）反向引用" class="headerlink" title="（5）反向引用"></a>（5）反向引用</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/(1&#123;2&#125;)(a&#123;2&#125;)\1/</span>; ==&gt; 11aa11</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg2 = <span class="regexp">/(1&#123;2&#125;)(a&#123;2&#125;)\2/</span>; ==&gt; 11aaaa</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<ul>
<li>在正则表达式中，匿名捕获组以 ==<strong>\n</strong>== 的形式对()捕获组进行引用，n代表要引用第几个捕获组<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/(?&lt;num1&gt;1&#123;2&#125;)(?&lt;num2&gt;a&#123;2&#125;)\k&lt;num1&gt;/</span>; ==&gt; 11aa11</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg2 = <span class="regexp">/(?&lt;num1&gt;1&#123;2&#125;)(?&lt;num2&gt;a&#123;2&#125;)\k&lt;num2&gt;/</span>; ==&gt; 11aaaa</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li>在正则表达式中，具名捕获组以 ==<strong>\k&lt;name&gt;</strong>== 的形式对()捕获组进行引用，name代表要引用的捕获组名称</li>
</ul>
<h4 id="7-断言-预查"><a href="#7-断言-预查" class="headerlink" title="7.断言/预查"></a>7.断言/预查</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/[a-z](?=\d+)/g</span>; ==&gt; ab11 ==&gt; b</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/[a-z](?!=\d+)/g</span>; ==&gt; ab11 ==&gt; a</span><br></pre></td></tr></table></figure>
<ul>
<li>在正则表达式中，以 ==<strong>（ ？=规则）</strong>== 的形式对匹配进行正向预查</li>
<li>在正则表达式中，以 ==<strong>（ ？！=规则）</strong>== 的形式对匹配进行负向预查</li>
<li>此形式的()不会成为捕获组，亦不会成为匹配结果的一部分</li>
<li>reg1匹配一个小写字母，且要满足后面跟随的是数字</li>
<li>reg2匹配一个小写字母，且要满足后面跟随的不是数字<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;1234567890&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/\B(?=(\d&#123;3&#125;)+$)/g</span>;</span><br><span class="line"><span class="keyword">var</span> s = str.replace(reg, <span class="string">&quot;,&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(s); ==&gt; <span class="string">&quot;1,234,567,890&quot;</span></span><br></pre></td></tr></table></figure></li>
<li>钱数表示法<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;aA123.10&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&amp;*()&lt;&gt;+-/.]).&#123;6,8&#125;$/</span>;</span><br><span class="line"><span class="keyword">var</span> resault = reg.test(str);</span><br><span class="line"><span class="built_in">console</span>.log(resault);</span><br></pre></td></tr></table></figure></li>
<li>密码强度检查<ul>
<li>(?=.*[a-z]) 有没有包含一个小写字母</li>
<li>(?=.*[A-Z]) 有没有包含一个大写字母</li>
<li>(?=.*\d) 有没有包含一个数字</li>
<li>(?=.*[!@#$%^&amp;*()&lt;&gt;+-/.]) 有没有包含一个特殊字符</li>
</ul>
</li>
<li>==预查不会消耗字符，预查完后匹配位置依然从0开始==</li>
</ul>
<hr>
<h3 id="（十）Error（构造函数）"><a href="#（十）Error（构造函数）" class="headerlink" title="（十）Error（构造函数）"></a>（十）Error（构造函数）</h3><h4 id="1-错误类型"><a href="#1-错误类型" class="headerlink" title="1.错误类型"></a>1.错误类型</h4><ul>
<li>语法错误：导致当前脚本块不执行</li>
<li>运行错误<ul>
<li>运行报错：导致当前脚本块后续代码不执行</li>
<li>运行结果不符合预期</li>
</ul>
</li>
</ul>
<h4 id="2-调试错误"><a href="#2-调试错误" class="headerlink" title="2.调试错误"></a>2.调试错误</h4><ul>
<li>控制台打印</li>
<li>断点调试（Chrome）</li>
</ul>
<h4 id="3-抛出错误"><a href="#3-抛出错误" class="headerlink" title="3.抛出错误"></a>3.抛出错误</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> e = <span class="keyword">new</span> <span class="built_in">Error</span>(msg);</span><br><span class="line"></span><br><span class="line"><span class="keyword">throw</span> e;</span><br></pre></td></tr></table></figure>

<h4 id="4-错误家族"><a href="#4-错误家族" class="headerlink" title="4.错误家族"></a>4.错误家族</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Error()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>SyntaxError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">语法错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>TypeError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">类型错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>ReferenceError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">引用错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>RangeError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">越界错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>URLError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">路径错误</td>
<td align="left">{Error}</td>
</tr>
</tbody></table>
<h4 id="5-捕获错误"><a href="#5-捕获错误" class="headerlink" title="5.捕获错误"></a>5.捕获错误</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span>&#123;</span><br><span class="line">  <span class="comment">//错误捕获区</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">catch</span>(e)&#123;</span><br><span class="line">  <span class="comment">//错误处理区</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">finally</span>&#123;</span><br><span class="line">  <span class="comment">//最终执行区</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="八、DOM核心"><a href="#八、DOM核心" class="headerlink" title="八、DOM核心"></a>八、DOM核心</h2><h3 id="（一）获取"><a href="#（一）获取" class="headerlink" title="（一）获取"></a>（一）获取</h3><h4 id="1-获取DOM节点"><a href="#1-获取DOM节点" class="headerlink" title="1.获取DOM节点"></a>1.获取DOM节点</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
<th align="left">兼容性</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>document.documentElement</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">html节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.head</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">head节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.body</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">body节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.links</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">超链接节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.anchors</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">锚链接（name属性）节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.forms</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">form节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.getElementById()</strong></td>
<td align="left">方法</td>
<td align="left">{string/ID属性值}</td>
<td align="left">id属性节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.getElementsByTagName()</strong></td>
<td align="left">方法</td>
<td align="left">{string/元素名}</td>
<td align="left">元素节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.getElementsByName()</strong></td>
<td align="left">方法</td>
<td align="left">{string/name属性值}</td>
<td align="left">name属性节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.getElementsByClassName()</strong></td>
<td align="left">方法</td>
<td align="left">{string/class属性值}</td>
<td align="left">class属性节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
<tr>
<td align="left"><strong>document.querySelector()</strong></td>
<td align="left">方法</td>
<td align="left">{string/css选择器}</td>
<td align="left">class属性节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE8及以上</td>
</tr>
<tr>
<td align="left"><strong>document.querySelectorAll()</strong></td>
<td align="left">方法</td>
<td align="left">{string/css选择器}</td>
<td align="left">class属性节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">IE8及以上</td>
</tr>
</tbody></table>
<ul>
<li>querySelectorAll()获取的是静态快照，其它的均是实时更新的</li>
<li>定义ID属性的DOM节点会成为window对象的属性，它是一个实时的单对象，会与同名全局变量冲突</li>
<li>getElementsByTagName()/getElementsByClassName()/querySelector()/querySelectorAll()在元素节点上均有定义</li>
</ul>
<h4 id="2-节点关系"><a href="#2-节点关系" class="headerlink" title="2.节点关系"></a>2.节点关系</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
<th align="left">兼容性</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>node.parentNode</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">父节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.previousSibling</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">前兄弟节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.nextSibling</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">后兄弟节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.childNodes</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">子节点</td>
<td align="left">{Array&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.firstChild</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">第一个子节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.lastChild</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">第一个子节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.attributes</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">属性节点</td>
<td align="left">{Array&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
</tbody></table>
<h4 id="3-元素关系"><a href="#3-元素关系" class="headerlink" title="3.元素关系"></a>3.元素关系</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
<th align="left">兼容性</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>ele.parentElement</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">父节点、父元素</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>ele.previousElementSibling</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">前兄弟节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
<tr>
<td align="left"><strong>ele.nextElementSibling</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">后兄弟节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
<tr>
<td align="left"><strong>ele.children</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">子节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>ele.firstElementChild</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">第一个子节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
<tr>
<td align="left"><strong>ele.lastElementChild</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">第一个子节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
</tbody></table>
<h4 id="4-节点属性"><a href="#4-节点属性" class="headerlink" title="4.节点属性"></a>4.节点属性</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
<th align="left">兼容性</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>dom.nodeName</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">节点名</td>
<td align="left">{STRING}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>dom.tagName</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">元素名</td>
<td align="left">{STRING}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>dom.nodeValue</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">节点内容</td>
<td align="left">{string}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>dom.nodeType</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">节点类型</td>
<td align="left">{number}</td>
<td align="left">——</td>
</tr>
</tbody></table>
<hr>
<h3 id="（二）操作"><a href="#（二）操作" class="headerlink" title="（二）操作"></a>（二）操作</h3><h4 id="1-操作DOM属性"><a href="#1-操作DOM属性" class="headerlink" title="1.操作DOM属性"></a>1.操作DOM属性</h4><h5 id="（1）可识别属性（HTML正常属性）"><a href="#（1）可识别属性（HTML正常属性）" class="headerlink" title="（1）可识别属性（HTML正常属性）"></a>（1）可识别属性（HTML正常属性）</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">div.id</span><br><span class="line">div.className</span><br><span class="line">label.htmlFor</span><br><span class="line">input.value = <span class="string">&quot;请输入内容&quot;</span>;</span><br><span class="line">img.src = <span class="string">&quot;./1.jpg&quot;</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>正常的属性即使没有赋值也有默认值</li>
<li>布尔属性获取的是Boolean值，并非原始书写值</li>
<li>正常的属性名与关键字/保留字冲突时，修改属性名</li>
<li>有些HTML元素并不存在的属性也可以正常使用</li>
</ul>
<h5 id="（2）自定义属性"><a href="#（2）自定义属性" class="headerlink" title="（2）自定义属性"></a>（2）自定义属性</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">abc</span>=<span class="string">&quot;123&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">data-abc</span>=<span class="string">&quot;123&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">div.getAttribute(<span class="string">&quot;abc&quot;</span>);</span><br><span class="line">div.setAttribute(<span class="string">&quot;abc&quot;</span>, <span class="string">&quot;123&quot;</span>)</span><br><span class="line">div.removeAttribute(<span class="string">&quot;abc&quot;</span>);</span><br><span class="line"></span><br><span class="line">div.dataset.abc;</span><br><span class="line">div.dataset.abc = <span class="string">&quot;123&quot;</span>;</span><br><span class="line"><span class="keyword">delete</span> div.dataset.abc;</span><br></pre></td></tr></table></figure>

<h4 id="2-操作DOM内容"><a href="#2-操作DOM内容" class="headerlink" title="2.操作DOM内容"></a>2.操作DOM内容</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">div.innerHtml</span><br><span class="line">div.innerHtml = <span class="string">&quot;&lt;p&gt;段落&lt;/p&gt;&quot;</span></span><br><span class="line"></span><br><span class="line">p.innerText</span><br><span class="line">p.innerText = <span class="string">&quot;段落&quot;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>innerHtml可识别HTML元素内容</li>
<li>innerText可见并且显示的纯文本内容，有兼容性问题</li>
<li>textContent源代码纯文本内容，有兼容性问题</li>
</ul>
<h4 id="3-操作DOM结构"><a href="#3-操作DOM结构" class="headerlink" title="3.操作DOM结构"></a>3.操作DOM结构</h4><h5 id="（1）操作页面元素对象"><a href="#（1）操作页面元素对象" class="headerlink" title="（1）操作页面元素对象"></a>（1）操作页面元素对象</h5><ul>
<li><strong>A父元素.appendChild(元素1)</strong><ul>
<li>将元素1剪切，追加到A元素的最后一个子元素位置</li>
</ul>
</li>
<li><strong>A父元素.append(元素1、2、3…)</strong><ul>
<li>将元素1、2、3剪切，依次追加到A元素的最后一个子元素位置</li>
</ul>
</li>
<li><strong>A父元素.insertBefore(元素1，子元素a)</strong><ul>
<li>将元素1剪切，插入到A元素的子元素a前面的位置</li>
</ul>
</li>
<li><strong>A父元素.insertBefore(元素1，子元素a.nextElementSibling)</strong><ul>
<li>将元素1剪切，插入到A元素的子元素a后面的位置</li>
</ul>
</li>
<li><strong>A父元素.replaceChild(元素1，子元素a)</strong><ul>
<li>将元素1剪切，替换掉A元素的子元素a的位置</li>
</ul>
</li>
</ul>
<h5 id="（2）创建新元素对象"><a href="#（2）创建新元素对象" class="headerlink" title="（2）创建新元素对象"></a>（2）创建新元素对象</h5><ul>
<li><strong>document.createElement(元素名)</strong> 创建元素</li>
<li><strong>document.createDocumentFragment()</strong> 创建文档片段</li>
</ul>
<h5 id="（3）克隆页面元素对象"><a href="#（3）克隆页面元素对象" class="headerlink" title="（3）克隆页面元素对象"></a>（3）克隆页面元素对象</h5><ul>
<li><strong>dom.cloneNode(是否深度克隆)</strong> 克隆元素</li>
<li>浅克隆：仅仅克隆自身</li>
<li>深克隆：克隆自身包含所有子元素及后代</li>
</ul>
<h5 id="（4）删除页面元素对象"><a href="#（4）删除页面元素对象" class="headerlink" title="（4）删除页面元素对象"></a>（4）删除页面元素对象</h5><ul>
<li><strong>A父元素.removeChild(子元素a)</strong> 谋杀</li>
<li><strong>子元素a.remove()</strong> 自杀</li>
</ul>
<h4 id="4-操作DOM样式"><a href="#4-操作DOM样式" class="headerlink" title="4.操作DOM样式"></a>4.操作DOM样式</h4><h5 id="（1）类样式"><a href="#（1）类样式" class="headerlink" title="（1）类样式"></a>（1）类样式</h5><ul>
<li><strong>dom.className</strong>：预先定义好css类样式，通过className改变类来对应实现类样式（兼容性好）</li>
<li><strong>dom.classList</strong>：预先定义好css类样式，通过classList.add/remove/contains/toggle方法来控制类（兼容性不好）</li>
</ul>
<h5 id="（2）样式属性"><a href="#（2）样式属性" class="headerlink" title="（2）样式属性"></a>（2）样式属性</h5><ul>
<li><strong>dom.style</strong>：行内样式对象</li>
<li>css-书写方式应转换为小驼峰书写方式</li>
<li>只能操作行内书写样式，得到的是声明值</li>
<li>==设置样式：只能设置行内样式==</li>
</ul>
<h5 id="（3）计算样式"><a href="#（3）计算样式" class="headerlink" title="（3）计算样式"></a>（3）计算样式</h5><ul>
<li>**window.getComputeStyle(dom, 伪元素)**： 获取计算样式对象</li>
<li>获取的是最终经过计算的绝对值</li>
</ul>
<hr>
<h3 id="（三）事件"><a href="#（三）事件" class="headerlink" title="（三）事件"></a>（三）事件</h3><h4 id="1-术语-1"><a href="#1-术语-1" class="headerlink" title="1.术语"></a>1.术语</h4><ul>
<li>事件：发生一件事</li>
<li>事件类型：事件发生的类型</li>
<li>事件处理程序：事件发生时，运行的函数</li>
<li>事件注册：将事件处理程序挂载到事件上</li>
<li>事件源：事件目标元素</li>
</ul>
<h4 id="2-事件流"><a href="#2-事件流" class="headerlink" title="2.事件流"></a>2.事件流</h4><ul>
<li>概念：某个事件发生时，哪些元素会监听到该事件，这些元素触发该事件的顺序</li>
<li>规则：当一个元素的事件发生时，其所有的祖先元素均发生了该事件（与元素结构有关，与视觉效果无关）</li>
<li>冒泡：事件从最里层事件源开始，依次向祖先元素传递</li>
<li>捕获：事件从最外层祖先元素开始，依次向事件源传递</li>
<li>顺序：事件捕获阶段 –&gt; 事件目标阶段 –&gt; 事件冒泡阶段</li>
<li>标准：默认事件冒泡</li>
</ul>
<h4 id="3-事件注册-注销"><a href="#3-事件注册-注销" class="headerlink" title="3.事件注册/注销"></a>3.事件注册/注销</h4><h5 id="（1）事件属性"><a href="#（1）事件属性" class="headerlink" title="（1）事件属性"></a>（1）事件属性</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div onclick=<span class="string">&quot;console.log(&quot;</span><span class="string">&quot;)&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">div.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">div.onclick = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>事件属性只能给同一事件类型注册一个事件处理程序</li>
</ul>
<h5 id="（2）事件注册方法"><a href="#（2）事件注册方法" class="headerlink" title="（2）事件注册方法"></a>（2）事件注册方法</h5><p><strong>标准</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">div.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="keyword">do</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">do</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line">div.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;, <span class="literal">false</span>)<span class="comment">//冒泡</span></span><br><span class="line">div.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;, <span class="literal">true</span>)<span class="comment">//捕获</span></span><br><span class="line"></span><br><span class="line">div.removeEventLister(<span class="string">&quot;click&quot;</span>, <span class="keyword">do</span>)</span><br></pre></td></tr></table></figure>
<ul>
<li>事件方法可以给同一事件类型注册多个事件处理程序，按照注册顺序依次执行</li>
<li>移除事件不能使用匿名函数</li>
<li>==可以用第三个参数==<ul>
<li>boolean 指定事件处理阶段,默认false：冒泡，true：捕获（对事件目标阶段的事件无效）</li>
<li>Object 配置属性capture默认false：冒泡，true：捕获/属性once默认false：执行多次，true：仅仅执行一次</li>
</ul>
</li>
</ul>
<p><strong>兼容</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">div.attachEvent(<span class="string">&quot;click&quot;</span>, <span class="keyword">do</span>)</span><br><span class="line">div.detachEvent(<span class="string">&quot;click&quot;</span>, <span class="keyword">do</span>)</span><br></pre></td></tr></table></figure>


<h4 id="4-事件对象"><a href="#4-事件对象" class="headerlink" title="4.事件对象"></a>4.事件对象</h4><h5 id="（1）获取-1"><a href="#（1）获取-1" class="headerlink" title="（1）获取"></a>（1）获取</h5><p><strong>标准</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">div.onclick = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>事件处理程序的第一个参数</li>
</ul>
<p><strong>兼容</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.event</span><br></pre></td></tr></table></figure>
<ul>
<li>全局属性event</li>
</ul>
<h5 id="（2）成员"><a href="#（2）成员" class="headerlink" title="（2）成员"></a>（2）成员</h5><ul>
<li><strong>事件源:</strong> <ul>
<li>标准e.target </li>
<li>兼容e.srcElement</li>
<li>事件委托：通过给父元素注册事件，通过事件源来实现子元素的事件处理</li>
</ul>
</li>
<li><strong>当前目标：</strong> e.currentTarget指代绑定事件的元素，与this等效</li>
<li><strong>事件类型：</strong> e.type</li>
<li><strong>阻止浏览器默认行为：</strong><ul>
<li>标准e.preventDefault()方法 </li>
<li>兼容e.returnValue属性默认true，更改为false</li>
<li>事件属性方式返回布尔值false</li>
<li>a元素href=”javascript:void(0)”</li>
</ul>
</li>
<li><strong>阻止冒泡：</strong><ul>
<li>标准e.stopPropagation()方法</li>
<li>兼容e.cancelBubble属性默认false，更改为true</li>
</ul>
</li>
<li><strong>处理阶段：</strong> e.eventPhase<ul>
<li>1 捕获</li>
<li>2 目标</li>
<li>3 冒泡</li>
</ul>
</li>
</ul>
<h5 id="（3）鼠标事件对象MouseEvent"><a href="#（3）鼠标事件对象MouseEvent" class="headerlink" title="（3）鼠标事件对象MouseEvent"></a>（3）鼠标事件对象MouseEvent</h5><ul>
<li><strong>辅助键</strong><ul>
<li>e.altKey:true/false 是否搭配使用了键盘alt辅助键</li>
<li>e.ctrlKey:true/false 是否搭配使用了键盘ctrl辅助键</li>
<li>e.shiftKey:true/false 是否搭配使用了键盘shift辅助键</li>
</ul>
</li>
<li><strong>使用键</strong><ul>
<li>e.button:0/1/2 使用的是左、中、右键（默认值为0）</li>
</ul>
</li>
<li><strong>位置</strong><ul>
<li>e.pageX 相对于页面left的横坐标</li>
<li>e.pageY 相对于页面top的纵坐标</li>
<li>e.clientX/e.x 相对于视口left的横坐标</li>
<li>e.clientY/e.y 相对于视口top的纵坐标</li>
<li>e.offsetX 相对于事件源填充盒left的横坐标</li>
<li>e.offsetY 相对于事件源填充盒top的纵坐标</li>
<li>e.screenX 相对于屏幕left的横坐标</li>
<li>e.screenY 相对于屏幕top的纵坐标</li>
<li>e.movementX 相对于鼠标上一次位置的横向偏移量</li>
<li>e.movementY 相对于鼠标上一次位置的纵向偏移量</li>
</ul>
</li>
</ul>
<h5 id="（4）键盘事件对象KeyboardEvent"><a href="#（4）键盘事件对象KeyboardEvent" class="headerlink" title="（4）键盘事件对象KeyboardEvent"></a>（4）键盘事件对象KeyboardEvent</h5><ul>
<li>e.code 按键字符串，适应键盘布局 KeyD</li>
<li>e.key 按键字符串，不适应键盘布局  d</li>
</ul>
<h5 id="（5）窗口事件对象"><a href="#（5）窗口事件对象" class="headerlink" title="（5）窗口事件对象"></a>（5）窗口事件对象</h5><ul>
<li>document.documentElement.scrollTop/scrollLeft 获取/设置网页滚动距离</li>
<li>dom.scrollTop/scrollLeft scrollTop/scrollLeft 获取/设置当前元素滚动距离</li>
<li>screen.width/height 屏幕尺寸</li>
<li>window.outerWidth/outerHeight 窗口外尺寸</li>
<li>window.innerWidth/innerHeight 窗口内尺寸（包含滚动条）</li>
<li>document.documentElement.clientWidth/clientHeight视口尺寸（不包含滚动条）</li>
<li>dom.clientWidth/clientHeight可视填充盒尺寸（不包含滚动条、边框）</li>
<li>dom.offsetWidth/offsetHeight可视元素尺寸（包含滚动条、边框）</li>
<li>dom.scrollWidth/scrollHeight实际内容尺寸（包含滚动条、边框）</li>
<li>dom.offsetParent 最近的祖先定位元素<ul>
<li>dom.offsetLeft 相对于e.offsetParent的横向偏移量</li>
<li>dom.offsetTop 相对于e.offsetParent的纵向偏移量</li>
</ul>
</li>
<li>dom.getBoundingClientRect()获取对象rect<ul>
<li>rect.left 相对于视口的横向偏移量</li>
<li>rect.top 相对于视口的纵向偏移量</li>
</ul>
</li>
<li>window.scrollTo(x, y) 定位到指定位置</li>
<li>window.scrollBy(x, y) 相对偏移量（递增、递减）</li>
</ul>
<h4 id="5-事件类型"><a href="#5-事件类型" class="headerlink" title="5.事件类型"></a>5.事件类型</h4><h5 id="（1）鼠标事件类型"><a href="#（1）鼠标事件类型" class="headerlink" title="（1）鼠标事件类型"></a>（1）鼠标事件类型</h5><table>
<thead>
<tr>
<th align="center">类型</th>
<th align="center">含义</th>
<th align="center">应用</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>click</strong></td>
<td align="center">鼠标点击事件</td>
<td align="center">一般是左键</td>
</tr>
<tr>
<td align="center"><strong>dblclick</strong></td>
<td align="center">鼠标双击事件</td>
<td align="center">一般是左键</td>
</tr>
<tr>
<td align="center"><strong>mousedown</strong></td>
<td align="center">鼠标按下事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>mouseup</strong></td>
<td align="center">鼠标抬起事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>mousemove</strong></td>
<td align="center">鼠标移动事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>mouseover</strong></td>
<td align="center">鼠标进入事件</td>
<td align="center">冒泡</td>
</tr>
<tr>
<td align="center"><strong>mouseout</strong></td>
<td align="center">鼠标离开事件</td>
<td align="center">冒泡</td>
</tr>
<tr>
<td align="center"><strong>mouseenter</strong></td>
<td align="center">鼠标进入事件</td>
<td align="center">不冒泡</td>
</tr>
<tr>
<td align="center"><strong>mouseleave</strong></td>
<td align="center">鼠标离开事件</td>
<td align="center">不冒泡</td>
</tr>
</tbody></table>
<ul>
<li>over/out不包含子元素，从父元素到子元素就算离开了父元素</li>
<li>enter/leave包含子元素，从父元素进入子元素仍然算在父元素中</li>
</ul>
<h5 id="（2）键盘事件类型"><a href="#（2）键盘事件类型" class="headerlink" title="（2）键盘事件类型"></a>（2）键盘事件类型</h5><table>
<thead>
<tr>
<th align="center">类型</th>
<th align="center">含义</th>
<th align="center">应用</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>keydown</strong></td>
<td align="center">键盘按下事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>keyup</strong></td>
<td align="center">键盘抬起事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>keypress</strong></td>
<td align="center">键盘字符按下事件</td>
<td align="center">只监听字符键</td>
</tr>
</tbody></table>
<ul>
<li>keydown / keypress如果阻止了默认行为则对应输入内容不会显示</li>
</ul>
<h5 id="3-表单事件类型"><a href="#3-表单事件类型" class="headerlink" title="(3)表单事件类型"></a>(3)表单事件类型</h5><table>
<thead>
<tr>
<th align="center">类型</th>
<th align="center">含义</th>
<th align="center">应用</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>focus</strong></td>
<td align="center">聚焦事件</td>
<td align="center">e.bubbles/false不会冒泡</td>
</tr>
<tr>
<td align="center"><strong>blur</strong></td>
<td align="center">失去焦点</td>
<td align="center">e.bubbles/false不会冒泡</td>
</tr>
<tr>
<td align="center"><strong>submit</strong></td>
<td align="center">提交事件</td>
<td align="center">e.bubbles/true会冒泡</td>
</tr>
<tr>
<td align="center"><strong>change</strong></td>
<td align="center">文本改变事件</td>
<td align="center">e.bubbles/true会冒泡</td>
</tr>
<tr>
<td align="center"><strong>input</strong></td>
<td align="center">输入事件</td>
<td align="center">e.bubbles/true会冒泡</td>
</tr>
</tbody></table>
<h5 id="（4）窗口事件类型"><a href="#（4）窗口事件类型" class="headerlink" title="（4）窗口事件类型"></a>（4）窗口事件类型</h5><table>
<thead>
<tr>
<th align="center">类型</th>
<th align="center">含义</th>
<th align="center">宿主</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>load</strong></td>
<td align="center">资源全部加载完毕</td>
<td align="center">window</td>
</tr>
<tr>
<td align="center"><strong>DOMContentLoaded</strong></td>
<td align="center">DOM树构建完毕</td>
<td align="center">document</td>
</tr>
<tr>
<td align="center"><strong>readystatechange</strong></td>
<td align="center">document.readyState改变</td>
<td align="center">document</td>
</tr>
<tr>
<td align="center"><strong>beforeunload</strong></td>
<td align="center">窗口关闭前</td>
<td align="center">window</td>
</tr>
<tr>
<td align="center"><strong>unload</strong></td>
<td align="center">窗口关闭</td>
<td align="center">window</td>
</tr>
<tr>
<td align="center"><strong>scroll</strong></td>
<td align="center">滚动条滚动</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center"><strong>resize</strong></td>
<td align="center">视口尺寸改变</td>
<td align="center">window</td>
</tr>
<tr>
<td align="center"><strong>contextmenu</strong></td>
<td align="center">右键菜单</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center"><strong>paste</strong></td>
<td align="center">粘贴</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center"><strong>copy</strong></td>
<td align="center">复制</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center"><strong>cut</strong></td>
<td align="center">剪切</td>
<td align="center">*</td>
</tr>
</tbody></table>
<h4 id="6-浏览器渲染"><a href="#6-浏览器渲染" class="headerlink" title="6.浏览器渲染"></a>6.浏览器渲染</h4><h5 id="（1）渲染顺序"><a href="#（1）渲染顺序" class="headerlink" title="（1）渲染顺序"></a>（1）渲染顺序</h5><ul>
<li>1.网络：获取页面源代码</li>
<li>2.创建：document文档节点</li>
<li>3.预渲染：<ul>
<li>源代码从上到下，依次构建dom树</li>
<li>遇到（link/script）外部资源默认同步加载，外部资源加载完即立即执行</li>
<li>遇到（img/video/audio）外部资源默认异步加载，外部资源加载完即立即执行</li>
</ul>
</li>
<li>4.按照DOM树依次渲染子节点</li>
</ul>
<h5 id="（2）document-readyState状态"><a href="#（2）document-readyState状态" class="headerlink" title="（2）document.readyState状态"></a>（2）document.readyState状态</h5><ul>
<li>loading 资源开始加载</li>
<li>interactive DOM树构建完成 触发DOMContentLoaded</li>
<li>complete 资源加载完毕 触发load</li>
</ul>
<h4 id="7-事件模拟"><a href="#7-事件模拟" class="headerlink" title="7.事件模拟"></a>7.事件模拟</h4><ul>
<li>dom.click() 手动触发click事件</li>
<li>dom.submit() 手动触发submit事件</li>
<li>其它事件模拟<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//自定义事件</span></span><br><span class="line"><span class="keyword">var</span> event = <span class="keyword">new</span> MouseEvent(<span class="string">&quot;事件类型&quot;</span>, &#123;配置&#125;)</span><br><span class="line"><span class="comment">//分发事件</span></span><br><span class="line">dom.dispatchEvent(event)</span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h2 id="九、BOM核心"><a href="#九、BOM核心" class="headerlink" title="九、BOM核心"></a>九、BOM核心</h2><h3 id="（一）计时器（异步）"><a href="#（一）计时器（异步）" class="headerlink" title="（一）计时器（异步）"></a>（一）计时器（异步）</h3><h4 id="1-Timeout"><a href="#1-Timeout" class="headerlink" title="1.Timeout"></a>1.Timeout</h4><h5 id="（1）setTimeout-fn-time"><a href="#（1）setTimeout-fn-time" class="headerlink" title="（1）setTimeout(fn, time)"></a>（1）setTimeout(fn, time)</h5><ul>
<li>返回计时器编号timer，等待time之后，运行fn</li>
<li>fn内的this指向window<h5 id="（2）clearTimeout-timer"><a href="#（2）clearTimeout-timer" class="headerlink" title="（2）clearTimeout(timer)"></a>（2）clearTimeout(timer)</h5></li>
<li>清除计时器</li>
</ul>
<h4 id="2-Interval"><a href="#2-Interval" class="headerlink" title="2.Interval"></a>2.Interval</h4><h5 id="（1）setInterval-fn-time"><a href="#（1）setInterval-fn-time" class="headerlink" title="（1）setInterval(fn, time)"></a>（1）setInterval(fn, time)</h5><ul>
<li>返回计时器编号timer，没间隔time，运行一次fn</li>
<li>fn内的this指向window<h5 id="（2）clearInterval-timer"><a href="#（2）clearInterval-timer" class="headerlink" title="（2）clearInterval(timer)"></a>（2）clearInterval(timer)</h5></li>
<li>清除计时器</li>
</ul>
<hr>
<h2 id="十、进阶"><a href="#十、进阶" class="headerlink" title="十、进阶"></a>十、进阶</h2><h3 id="（一）原型与原型链"><a href="#（一）原型与原型链" class="headerlink" title="（一）原型与原型链"></a>（一）原型与原型链</h3><h4 id="1-原型prototype"><a href="#1-原型prototype" class="headerlink" title="1.原型prototype"></a>1.原型prototype</h4><ul>
<li>所有的对象都是通过<strong>new 函数</strong>来创建的</li>
<li>所有的函数也都是对象，函数也可以有属性</li>
<li>所有的函数都有一个prototype属性，叫做原型<ul>
<li>默认是一个普通对象{}</li>
<li>有一个默认属性constructor，默认指向该构造函数<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>()</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Test</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">Test.prototype = &#123;</span><br><span class="line">  <span class="attr">constructor</span>: Test</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="2-隐式原型-proto"><a href="#2-隐式原型-proto" class="headerlink" title="2.隐式原型__proto__"></a>2.隐式原型__proto__</h4><ul>
<li>所有的对象都有一个默认属性__proto__，叫隐式原型<ul>
<li>默认指向该对象的构造函数的原型</li>
</ul>
</li>
<li>对象成员访问顺序：<ul>
<li>对象自身中是否有该成员，如果有则直接访问</li>
<li>对象隐式原型__proto__中是否有该成员，如果有则直接访问</li>
<li>在原型链中依次查找<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Test</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj1 = <span class="keyword">new</span> Test()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj2 = <span class="keyword">new</span> Test()</span><br><span class="line"></span><br><span class="line">Test.prototype === obj1.__proto__ === obj2.__proto__  ==&gt; <span class="literal">true</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="3-原型链"><a href="#3-原型链" class="headerlink" title="3.原型链"></a>3.原型链</h4><ul>
<li>特殊指向：<ul>
<li>Function的隐式原型__proto__指向自身的原型prototype</li>
<li>Object的原型prototype的隐式原型__proto__指向null</li>
</ul>
</li>
<li>利用原型链访问顺序的特点，即可就近重写继承的成员<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Test</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">Test.prototype === Test.__proto__</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="4-API"><a href="#4-API" class="headerlink" title="4.API"></a>4.API</h4><ul>
<li><strong>Object.getPrototypeOf(obj)</strong> 获取隐式原型（__proto__系统成员不推荐使用）</li>
<li><strong>Object.create(obj)</strong> 以obj为隐式原型创建一个对象</li>
<li><strong>objPrototype.isPrototypeOf(obj)</strong> 判断objPrototype是否在obj的原型链上</li>
<li><strong>obj instanceOf Fn</strong> 判断obj的原型链上是否有Fn的原型（obj 是不是一个 Fn）</li>
<li><strong>obj.hasOwnProperty(x)</strong> 判断x是否是obj自身的属性（遍历对象默认会遍历原型链上的可枚举属性）</li>
</ul>
<h4 id="5-继承（圣杯模式）"><a href="#5-继承（圣杯模式）" class="headerlink" title="5.继承（圣杯模式）"></a>5.继承（圣杯模式）</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherit</span>(<span class="params">son, father</span>)</span>&#123;</span><br><span class="line">  son.prototype = <span class="built_in">Object</span>.create(father.prototype);</span><br><span class="line">  son.prototype.constructor = son;</span><br><span class="line">  son.prototype.uber = father.prototype;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherit</span>(<span class="params">son, father</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> Temp = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">  Temp.prototype = father.prototype;</span><br><span class="line">  son.prototype = <span class="keyword">new</span> Temp();</span><br><span class="line">  son.prototype.constructor = son;</span><br><span class="line">  son.prototype.uber = father.prototype;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> inherit = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> Temp = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">  <span class="keyword">return</span>   <span class="function"><span class="keyword">function</span>(<span class="params">son, father</span>)</span>&#123;</span><br><span class="line">    Temp.prototype = father.prototype;</span><br><span class="line">    son.prototype = <span class="keyword">new</span> Temp();</span><br><span class="line">    son.prototype.constructor = son;</span><br><span class="line">    son.prototype.uber = father.prototype;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;())</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="（二）属性描述符"><a href="#（二）属性描述符" class="headerlink" title="（二）属性描述符"></a>（二）属性描述符</h3><h4 id="1-术语-2"><a href="#1-术语-2" class="headerlink" title="1.术语"></a>1.术语</h4><ul>
<li>元数据：描述数据的数据</li>
<li>数据属性：普通（正常）的属性（默认用数据描述符）</li>
<li>存取属性：添加了访问器（get/set）的属性（用存取描述符）</li>
<li>可读 value</li>
<li>可写 writeable</li>
<li>可枚举 enumerable</li>
<li>可配置 configurable</li>
</ul>
<h4 id="2-描述符可同时具有的键值"><a href="#2-描述符可同时具有的键值" class="headerlink" title="2.描述符可同时具有的键值"></a>2.描述符可同时具有的键值</h4><table>
<thead>
<tr>
<th align="left"></th>
<th align="center">数据描述符</th>
<th align="center">存取描述符</th>
</tr>
</thead>
<tbody><tr>
<td align="left">value</td>
<td align="center">√</td>
<td align="center">×</td>
</tr>
<tr>
<td align="left">writeable</td>
<td align="center">√</td>
<td align="center">×</td>
</tr>
<tr>
<td align="left">enumerable</td>
<td align="center">√</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">configurable</td>
<td align="center">√</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">get</td>
<td align="center">×</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">set</td>
<td align="center">×</td>
<td align="center">√</td>
</tr>
</tbody></table>
<h4 id="3-API"><a href="#3-API" class="headerlink" title="3.API"></a>3.API</h4><ul>
<li><strong>Object.defineProperty(obj, prop, descriptor)</strong> 配置属性描述</li>
<li><strong>Object.getOwnPropertyDescriptor(obj, prop)</strong> 获取属性描述<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(obj, <span class="string">&quot;x&quot;</span>, &#123;</span><br><span class="line">  <span class="attr">get</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//当获取obj.x值时，会运行此函数，此函数返回值始终为表达式的值（属性值）</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;abc&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">set</span>: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//当设置obj.x = &quot;abc&quot;值时，会运行此函数，赋的值始终为函数的value参数值（非属性值）</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h3 id="（三）作用域与作用域链"><a href="#（三）作用域与作用域链" class="headerlink" title="（三）作用域与作用域链"></a>（三）作用域与作用域链</h3><h4 id="1-执行上下文"><a href="#1-执行上下文" class="headerlink" title="1.执行上下文"></a>1.执行上下文</h4><ul>
<li>全局执行上下文：js代码执行前，创建的一块内存空间，存储着代码执行所需的数据，为代码执行提供支持</li>
<li>函数执行上下文：函数运行前，创建的一块内存空间，存储着函数运行所需的数据，为函数运行提供支持</li>
<li>执行上下文栈：call stack所有执行上下文组成的内存空间，js引擎始终执行的是栈顶的上下文</li>
<li>VO：Variable Object 执行上下文对象，记录了该环境中声明的参数、变量、函数</li>
<li>GO：Global Object 全局执行上下文对象，记录了全局环境中声明的变量、函数</li>
<li>AO：Active Object 当前执行上下文对象，记录了当前环境中声明的参数、变量、函数</li>
</ul>
<h4 id="2-执行上下文内容"><a href="#2-执行上下文内容" class="headerlink" title="2.执行上下文内容"></a>2.执行上下文内容</h4><h5 id="（1）this指向"><a href="#（1）this指向" class="headerlink" title="（1）this指向"></a>（1）this指向</h5><ul>
<li>全局环境this指向window对象</li>
<li>函数直接调用this指向window对象</li>
<li>对象方法调用this指向调用对象</li>
<li>new操作符调用this指向创建的新对象</li>
</ul>
<h5 id="（2）预编译"><a href="#（2）预编译" class="headerlink" title="（2）预编译"></a>（2）预编译</h5><ul>
<li>变量声明、函数声明提升，赋默认值：undefined<ul>
<li>若变量声明已存在，则忽略</li>
<li>若函数声明已存在，则覆盖</li>
</ul>
</li>
<li>形参变量赋值为实参值</li>
<li>函数变量赋值为函数对象</li>
</ul>
<h5 id="（3）代码依次执行"><a href="#（3）代码依次执行" class="headerlink" title="（3）代码依次执行"></a>（3）代码依次执行</h5><ul>
<li>遇到赋值语句，对应修改上下文内容</li>
</ul>
<h4 id="3-作用域链"><a href="#3-作用域链" class="headerlink" title="3.作用域链"></a>3.作用域链</h4><ul>
<li>函数自身有一个隐式属性<code>[[scope]]</code>指向该函数定义时的AO</li>
<li>函数执行时，访问一个变量<ul>
<li>在当前执行上下文中查找</li>
<li>若当前VO中不存在，则依次从<code>[[scope]]</code>指向的VO中查找</li>
<li>若最终都没有找到，则会报错</li>
</ul>
</li>
</ul>
<h4 id="4-闭包"><a href="#4-闭包" class="headerlink" title="4.闭包"></a>4.闭包</h4><ul>
<li>每次函数运行都会创建一个新的执行上下文，运行结束即销毁</li>
<li>当函数运行中定义并返回了一个函数，该函数的<code>[[scope]]</code>会保留当前AO</li>
<li>若返回函数的引用存在，导致执行上下文无法销毁，会造成内存泄露</li>
</ul>
<h3 id="（四）事件循环"><a href="#（四）事件循环" class="headerlink" title="（四）事件循环"></a>（四）事件循环</h3><h4 id="1-浏览器线程"><a href="#1-浏览器线程" class="headerlink" title="1.浏览器线程"></a>1.浏览器线程</h4><ul>
<li>JS引擎线程：负责执行js代码</li>
<li>渲染线程：负责渲染页面</li>
<li>计时器线程：负责计时</li>
<li>事件监听线程：负责事件监听</li>
<li>HTTP网络线程：负责网络通信</li>
</ul>
<h4 id="2-事件队列"><a href="#2-事件队列" class="headerlink" title="2.事件队列"></a>2.事件队列</h4><ul>
<li>js是单线程，并不具备处理代码执行以外的事情，只是通过间接的通知其它线程去异步做某些事</li>
<li>当某些条件成熟才运行的函数为异步函数，其它线程并不具备执行函数的功能，只是等条件成熟后将异步函数放入事件队列</li>
<li>js引擎只有当执行栈空闲时，才会去执行事件队列中的第一个异步函数</li>
<li>事件队列是一个堆结构（先进先出）</li>
</ul>
<h4 id="3-事件循环"><a href="#3-事件循环" class="headerlink" title="3.事件循环"></a>3.事件循环</h4><ul>
<li>event loop 是指函数在执行栈、宿主线程、事件队列中的循环移动</li>
</ul>
<hr>
<h3 id="（五）功能与性能"><a href="#（五）功能与性能" class="headerlink" title="（五）功能与性能"></a>（五）功能与性能</h3><h4 id="1-对象混合mixin"><a href="#1-对象混合mixin" class="headerlink" title="1.对象混合mixin"></a>1.对象混合mixin</h4><h4 id="2-对象克隆clone"><a href="#2-对象克隆clone" class="headerlink" title="2.对象克隆clone"></a>2.对象克隆clone</h4><h4 id="3-函数防抖debounce"><a href="#3-函数防抖debounce" class="headerlink" title="3.函数防抖debounce"></a>3.函数防抖debounce</h4><h4 id="4-函数节流throttle"><a href="#4-函数节流throttle" class="headerlink" title="4.函数节流throttle"></a>4.函数节流throttle</h4><h4 id="5-函数科里化curry"><a href="#5-函数科里化curry" class="headerlink" title="5.函数科里化curry"></a>5.函数科里化curry</h4><h4 id="6-函数管道pipe"><a href="#6-函数管道pipe" class="headerlink" title="6.函数管道pipe"></a>6.函数管道pipe</h4>
      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2017/12/01/ES5a/" data-id="ckya9fc0y000aygf6h5nedq05"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/js-es-es3-es5/" rel="tag">js es es3 es5</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-CSS2" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2017/11/15/CSS2/"
    >CSS 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2017/11/15/CSS2/" class="article-date">
  <time datetime="2017-11-14T16:00:00.000Z" itemprop="datePublished">2017-11-15</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h2 id="（一）概述"><a href="#（一）概述" class="headerlink" title="（一）概述"></a>（一）概述</h2><h3 id="1-概念"><a href="#1-概念" class="headerlink" title="1.概念"></a>1.概念</h3><ul>
<li>CSS：是w3c组织定义的语言标准，用于定义网页文档的样式</li>
<li>css：层叠样式表 Cascading Style Sheets </li>
<li><strong>样式</strong>：东西如何布局， 该东西展示出什么效果</li>
</ul>
<h3 id="2-术语"><a href="#2-术语" class="headerlink" title="2.术语"></a>2.术语</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="（1）选择器"><a href="#（1）选择器" class="headerlink" title="（1）选择器"></a>（1）选择器</h4><ul>
<li>ID选择器</li>
<li>class选择器</li>
<li>元素选择器</li>
</ul>
<h4 id="（2）声明块"><a href="#（2）声明块" class="headerlink" title="（2）声明块"></a>（2）声明块</h4><ul>
<li>属性名</li>
<li>属性值</li>
</ul>
<h4 id="（3）样式表"><a href="#（3）样式表" class="headerlink" title="（3）样式表"></a>（3）样式表</h4><ul>
<li>内部样式表 style元素</li>
<li>内联样式 style属性</li>
<li>外部样式表 link元素<ul>
<li>有利于样式复用</li>
<li>有利于浏览器缓存，提高页面响应</li>
<li>有利于HTML和CSS代码分离，利于维护</li>
</ul>
</li>
</ul>
<hr>
<h2 id="（二）选择器"><a href="#（二）选择器" class="headerlink" title="（二）选择器"></a>（二）选择器</h2><h3 id="1-常用选择器"><a href="#1-常用选择器" class="headerlink" title="1.常用选择器"></a>1.常用选择器</h3><table>
<thead>
<tr>
<th align="left">名称</th>
<th align="left">写法</th>
<th align="left">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="left">ID</td>
<td align="left">#id</td>
<td align="left">ID选择器</td>
</tr>
<tr>
<td align="left">Class</td>
<td align="left">.class</td>
<td align="left">类选择器</td>
</tr>
<tr>
<td align="left">通配符</td>
<td align="left">*</td>
<td align="left">选择所有的元素</td>
</tr>
<tr>
<td align="left">属性</td>
<td align="left">[xxx]</td>
<td align="left">=、~=、8=、^=、$=</td>
</tr>
<tr>
<td align="left">伪类</td>
<td align="left">:link/:visited/:hover/:active</td>
<td align="left">爱恨法则</td>
</tr>
<tr>
<td align="left">伪元素</td>
<td align="left">::before/::after</td>
<td align="left">content</td>
</tr>
<tr>
<td align="left">————————————</td>
<td align="left">————————————</td>
<td align="left">————————————</td>
</tr>
<tr>
<td align="left">并且</td>
<td align="left">AB</td>
<td align="left">选择器连写</td>
</tr>
<tr>
<td align="left">并列</td>
<td align="left">A,B</td>
<td align="left">逗号分隔（语法糖）</td>
</tr>
<tr>
<td align="left">后代</td>
<td align="left">A B</td>
<td align="left">空格分隔</td>
</tr>
<tr>
<td align="left">直接子元素</td>
<td align="left">A&gt;b</td>
<td align="left">&gt;连接</td>
</tr>
<tr>
<td align="left">弟元素</td>
<td align="left">A~B</td>
<td align="left">所有自身之后出现的兄弟元素</td>
</tr>
<tr>
<td align="left">直接弟元素</td>
<td align="left">A+B</td>
<td align="left">自身之后出现的第一个兄弟元素</td>
</tr>
<tr>
<td align="left">————————————</td>
<td align="left">————————————</td>
<td align="left">————————————</td>
</tr>
<tr>
<td align="left">伪类</td>
<td align="left">:fist-child/last-child/nth-child(n)</td>
<td align="left">第n个子元素</td>
</tr>
<tr>
<td align="left">伪类</td>
<td align="left">:first-of-type/last-of-type/nth-of-type(n)</td>
<td align="left">第n个指定类型的子元素</td>
</tr>
<tr>
<td align="left">伪元素</td>
<td align="left">::first-letter</td>
<td align="left">第一个字符</td>
</tr>
<tr>
<td align="left">伪元素</td>
<td align="left">::first-line</td>
<td align="left">第一行</td>
</tr>
<tr>
<td align="left">伪元素</td>
<td align="left">::selection</td>
<td align="left">选中字符</td>
</tr>
</tbody></table>
<hr>
<h3 id="2-层叠"><a href="#2-层叠" class="headerlink" title="2.层叠"></a>2.层叠</h3><h4 id="（1）声明冲突"><a href="#（1）声明冲突" class="headerlink" title="（1）声明冲突"></a>（1）声明冲突</h4><ul>
<li>同一个样式重复应用到了同一个元素上</li>
<li><strong>层叠：</strong> 浏览器自动解决冲突的过程</li>
</ul>
<h4 id="（2）权重计算"><a href="#（2）权重计算" class="headerlink" title="（2）权重计算"></a>（2）权重计算</h4><h5 id="1）比较重要性"><a href="#1）比较重要性" class="headerlink" title="1）比较重要性"></a>1）比较重要性</h5><ul>
<li>!important</li>
<li>普通样式</li>
<li>浏览器默认样式</li>
</ul>
<h5 id="2）比较特殊性"><a href="#2）比较特殊性" class="headerlink" title="2）比较特殊性"></a>2）比较特殊性</h5><ul>
<li>选择器范围越窄越特殊</li>
<li>通过选择器计算出4位数（xxxx）比大小（<font color=red>256进制</font>）<ul>
<li><strong>千位：</strong> 行内样式计1,否则为0</li>
<li><strong>百位：</strong> ID选择器数量之和</li>
<li><strong>十位：</strong> 类、伪类、属性选择器数量之和</li>
<li><strong>个位：</strong> 元素、伪元素选择器数量之和</li>
</ul>
</li>
</ul>
<h5 id="3）比较源次序"><a href="#3）比较源次序" class="headerlink" title="3）比较源次序"></a>3）比较源次序</h5><ul>
<li>源代码书写靠后的胜出</li>
</ul>
<hr>
<h2 id="（三）样式"><a href="#（三）样式" class="headerlink" title="（三）样式"></a>（三）样式</h2><h3 id="1-常用样式"><a href="#1-常用样式" class="headerlink" title="1.常用样式"></a>1.常用样式</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">属性值</th>
<th align="left">含义</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>color</strong></td>
<td align="left">预设值（单词）、色值（rgb）、十六进制（hex）</td>
<td align="left">字体颜色</td>
<td align="left">rgba（透明通道）</td>
</tr>
<tr>
<td align="left"><strong>background-color</strong></td>
<td align="left">预设值（单词）、色值（rgb）、十六进制（hex）</td>
<td align="left">背景色</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>font-size</strong></td>
<td align="left">像素（px）、相对父元素（em）</td>
<td align="left">字体大小</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>font-weight</strong></td>
<td align="left">预设值、数字</td>
<td align="left">粗体</td>
<td align="left">（b/strong）</td>
</tr>
<tr>
<td align="left"><strong>font-family</strong></td>
<td align="left">预设值、数字</td>
<td align="left">字体</td>
<td align="left">（sans-serif默认非衬线字体）</td>
</tr>
<tr>
<td align="left"><strong>font-style</strong></td>
<td align="left">normal、italic</td>
<td align="left">斜体</td>
<td align="left">（i/em）</td>
</tr>
<tr>
<td align="left"><strong>text-decoration</strong></td>
<td align="left">none、line-through</td>
<td align="left">修饰</td>
<td align="left">（s/del）</td>
</tr>
<tr>
<td align="left"><strong>text-indent</strong></td>
<td align="left">em</td>
<td align="left">首行文本缩进</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>text-align</strong></td>
<td align="left">left、center、right</td>
<td align="left">水平对齐方式</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>line-height</strong></td>
<td align="left">px、数字（自身高度的倍数）</td>
<td align="left">行距</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>letter-spacing</strong></td>
<td align="left">px、em</td>
<td align="left">字间距</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>width</strong></td>
<td align="left">px、%</td>
<td align="left">容器宽度</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>height</strong></td>
<td align="left">px、%</td>
<td align="left">容器高度</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">————————————</td>
<td align="left">————————————</td>
<td align="left">————————————</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>opcity</strong></td>
<td align="left">0~1</td>
<td align="left">盒子透明度</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>cursor</strong></td>
<td align="left">pointer</td>
<td align="left">鼠标样式</td>
<td align="left">图片格式.ico/.cur</td>
</tr>
<tr>
<td align="left"><strong>display</strong></td>
<td align="left">none</td>
<td align="left">不生成盒子</td>
<td align="left">不占空间</td>
</tr>
<tr>
<td align="left"><strong>visibility</strong></td>
<td align="left">hidden</td>
<td align="left">视觉隐藏</td>
<td align="left">占空间</td>
</tr>
<tr>
<td align="left"><strong>background-image</strong></td>
<td align="left">URL</td>
<td align="left">背景图片</td>
<td align="left">仅用于美化作用时，若属网页内容应用img</td>
</tr>
<tr>
<td align="left">————————————</td>
<td align="left">————————————</td>
<td align="left">————————————</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>display</strong></td>
<td align="left">list-item</td>
<td align="left">仍然是块盒，但会生成一个附带的次盒子</td>
<td align="left">次盒子排列在前 ul&gt;li 元素（可继承）</td>
</tr>
<tr>
<td align="left"><strong>list-style</strong></td>
<td align="left">none</td>
<td align="left">设置次盒子样式</td>
<td align="left">清空次盒子</td>
</tr>
<tr>
<td align="left"><strong>text-align</strong></td>
<td align="left">justify</td>
<td align="left">除最后一行外，分散对齐</td>
<td align="left">平均分布空白</td>
</tr>
<tr>
<td align="left"><strong>direction</strong></td>
<td align="left">ltr</td>
<td align="left">开始到结束的方向</td>
<td align="left">rtl从右到左</td>
</tr>
<tr>
<td align="left"><strong>writing-mode</strong></td>
<td align="left">vertical-rtl</td>
<td align="left">设置文字书写方向</td>
<td align="left">垂直书写</td>
</tr>
</tbody></table>
<h3 id="2-重置样式（reset-css）"><a href="#2-重置样式（reset-css）" class="headerlink" title="2.重置样式（reset.css）"></a>2.重置样式（reset.css）</h3><ul>
<li>重置浏览器默认样式</li>
<li>常见重置样式表：normalize.css | reset.css | meyer.css</li>
</ul>
<h3 id="3-爱恨法则（love-hate）"><a href="#3-爱恨法则（love-hate）" class="headerlink" title="3.爱恨法则（love hate）"></a>3.爱恨法则（love hate）</h3><ul>
<li>a:link 未访问过</li>
<li>a:visited 已访问过</li>
<li>a:hover 获得鼠标焦点</li>
<li>a:active 鼠标按下</li>
</ul>
<h3 id="4-继承"><a href="#4-继承" class="headerlink" title="4.继承"></a>4.继承</h3><ul>
<li>子元素会继承父元素的某些css样式（代代相传）</li>
<li>通常，跟文字相关的样式会继承</li>
</ul>
<h3 id="5-属性值的计算过程"><a href="#5-属性值的计算过程" class="headerlink" title="5.属性值的计算过程"></a>5.属性值的计算过程</h3><h4 id="（1）渲染"><a href="#（1）渲染" class="headerlink" title="（1）渲染"></a>（1）渲染</h4><ul>
<li>元素一个一个依次渲染，顺序按照DOMTree的顺序（深度优先）</li>
<li>元素要渲染必须所有的css属性都有值</li>
</ul>
<h4 id="（2）从无属性值到所有属性都有值的过程，为css属性值计算过程"><a href="#（2）从无属性值到所有属性都有值的过程，为css属性值计算过程" class="headerlink" title="（2）从无属性值到所有属性都有值的过程，为css属性值计算过程"></a>（2）从无属性值到所有属性都有值的过程，为css属性值计算过程</h4><h5 id="1）确定声明值："><a href="#1）确定声明值：" class="headerlink" title="1）确定声明值："></a>1）确定声明值：</h5><ul>
<li>将没有冲突的属性声明值直接确定css属性值（<font color=red>浏览器默认值为声明值</font>）</li>
</ul>
<h5 id="2）层叠冲突："><a href="#2）层叠冲突：" class="headerlink" title="2）层叠冲突："></a>2）层叠冲突：</h5><ul>
<li>将有冲突的属性声明值按照层叠规则确定css属性值</li>
</ul>
<h5 id="3）使用继承："><a href="#3）使用继承：" class="headerlink" title="3）使用继承："></a>3）使用继承：</h5><ul>
<li>对没有值的属性，若可以继承，则继承父元素的值</li>
</ul>
<h5 id="4）使用默认值："><a href="#4）使用默认值：" class="headerlink" title="4）使用默认值："></a>4）使用默认值：</h5><ul>
<li>对没有值的属性，使用默认值（<font color=red>此默认值非浏览器默认值</font>）</li>
</ul>
<hr>
<h2 id="（四）布局"><a href="#（四）布局" class="headerlink" title="（四）布局"></a>（四）布局</h2><h3 id="1-盒模型"><a href="#1-盒模型" class="headerlink" title="1.盒模型"></a>1.盒模型</h3><h4 id="（1）属性"><a href="#（1）属性" class="headerlink" title="（1）属性"></a>（1）属性</h4><table>
<thead>
<tr>
<th align="left">设置</th>
<th align="left">参数</th>
<th align="left">块盒</th>
<th align="left">行盒</th>
<th align="left">行块盒</th>
</tr>
</thead>
<tbody><tr>
<td align="left">内容</td>
<td align="left">width/height</td>
<td align="left">有效</td>
<td align="left">无效</td>
<td align="left">有效</td>
</tr>
<tr>
<td align="left">内边距</td>
<td align="left">padding</td>
<td align="left">有效</td>
<td align="left">仅水平有效</td>
<td align="left">有效</td>
</tr>
<tr>
<td align="left">边框</td>
<td align="left">border</td>
<td align="left">有效</td>
<td align="left">仅水平有效</td>
<td align="left">有效</td>
</tr>
<tr>
<td align="left">外边距</td>
<td align="left">margin</td>
<td align="left">有效</td>
<td align="left">仅水平有效</td>
<td align="left">有效</td>
</tr>
</tbody></table>
<h4 id="（2）组成"><a href="#（2）组成" class="headerlink" title="（2）组成"></a>（2）组成</h4><table>
<thead>
<tr>
<th align="left">组成</th>
<th align="left">参数</th>
<th align="center">内容盒</th>
<th align="center">填充盒</th>
<th align="center">边框盒</th>
</tr>
</thead>
<tbody><tr>
<td align="left">内容</td>
<td align="left">width/height</td>
<td align="center">√</td>
<td align="center">√</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">内边距</td>
<td align="left">padding</td>
<td align="center">——</td>
<td align="center">√</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">边框</td>
<td align="left">border</td>
<td align="center">——</td>
<td align="center">——</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">外边距</td>
<td align="left">margin</td>
<td align="center">——</td>
<td align="center">——</td>
<td align="center">——</td>
</tr>
</tbody></table>
<h4 id="（3）特点"><a href="#（3）特点" class="headerlink" title="（3）特点"></a>（3）特点</h4><table>
<thead>
<tr>
<th align="left">类型</th>
<th align="left">特点</th>
<th align="left">处理</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>宽高</strong></td>
<td align="left">默认设置的是内容盒</td>
<td align="left">css3中box-sizing属性可更改</td>
</tr>
<tr>
<td align="left"><strong>背景</strong></td>
<td align="left">默认覆盖范围是边框盒</td>
<td align="left">background-clip属性可更改</td>
</tr>
<tr>
<td align="left"><strong>内容溢出</strong></td>
<td align="left">默认可见</td>
<td align="left">overflow属性可更改</td>
</tr>
<tr>
<td align="left"><strong>断词规则</strong></td>
<td align="left">中文字符折断，英文单词折断</td>
<td align="left">Word-break属性可更改</td>
</tr>
<tr>
<td align="left"><strong>空白处理</strong></td>
<td align="left">文字溢出显示</td>
<td align="left">单行文本固定处理方式、多行文本人工处理</td>
</tr>
<tr>
<td align="left"><strong>空白折叠</strong></td>
<td align="left">所有的空白字符折叠为一个空格</td>
<td align="left">发生在行盒（行块盒）内部、发生在行盒（行块盒）之间；white-space 属性可更改</td>
</tr>
<tr>
<td align="left"><strong>img图片</strong></td>
<td align="left">设置一个属性，另一个会跟随图片比例变化</td>
<td align="left">object-fit 属性可设置图片比例与盒子之间的适应情况</td>
</tr>
<tr>
<td align="left"><strong>匿名行盒</strong></td>
<td align="left">文字直接出现在块盒中时，浏览器会自动生成一个莫名行盒（不可见）包裹内容</td>
<td align="left">==行框==承载文字内容的必要条件</td>
</tr>
<tr>
<td align="left"><strong>可替换元素</strong></td>
<td align="left">显示结果取决于元素属性</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>不可替换元素</strong></td>
<td align="left">显示结果取决于元素内容</td>
<td align="left">——</td>
</tr>
</tbody></table>
<hr>
<h3 id="2-视觉格式化模型"><a href="#2-视觉格式化模型" class="headerlink" title="2.视觉格式化模型"></a>2.视觉格式化模型</h3><h4 id="（1）常规流"><a href="#（1）常规流" class="headerlink" title="（1）常规流"></a>（1）常规流</h4><h5 id="1）概念"><a href="#1）概念" class="headerlink" title="1）概念"></a>1）概念</h5><ul>
<li>常规流、文档流、普通文档流、常规文档流</li>
<li>所有元素默认都属于常规流布局</li>
<li>总体规则：块盒独占一行、行盒水平依次排列</li>
</ul>
<h5 id="2）包含块"><a href="#2）包含块" class="headerlink" title="2）包含块"></a>2）包含块</h5><ul>
<li>包含块决定了盒子的排列区域</li>
<li>包含块通常是父元素的内容盒</li>
</ul>
<h5 id="3）水平布局"><a href="#3）水平布局" class="headerlink" title="3）水平布局"></a>3）水平布局</h5><ul>
<li><font color=red>盒子的总宽度必须等于包含块宽度</font></li>
<li>width：auto =&gt;&gt; 默认吸收剩余空间</li>
<li>margin：auto =&gt;&gt; 两边平均吸收剩余空间（==剩余空间的吸收：width强于margin==）</li>
<li>margin：0（默认值）若width、padding、border吸收后还有剩余空间，则剩余的全由margin-right/margin-left吸收</li>
<li>在常规流中，块盒在包含块中的居中，可以定宽，左右margin设置为auto</li>
</ul>
<h5 id="4）垂直布局"><a href="#4）垂直布局" class="headerlink" title="4）垂直布局"></a>4）垂直布局</h5><ul>
<li>height：auto =&gt;&gt; 自适应</li>
<li>margin：auto =&gt;&gt; 相当于0（默认值）</li>
<li>外边距合并：块盒上下相连外边距会发生合并（兄弟元素、父子元素）</li>
<li>解决外边距合并问题只要中间增加任意东西，使之不在相连即可（元素、边框、内边距）</li>
</ul>
<h5 id="5）百分比取值"><a href="#5）百分比取值" class="headerlink" title="5）百分比取值"></a>5）百分比取值</h5><ul>
<li>width、padding、border、margin百分比取值相对于包含块的宽度（与高度无关）</li>
<li>height百分比取值<ul>
<li>包含块的高度取决于子元素高度时，设置百分比无效</li>
<li>包含块的高度不取决于子元素高度时，百分比取决于父元素高度</li>
</ul>
</li>
</ul>
<hr>
<h4 id="（2）浮动"><a href="#（2）浮动" class="headerlink" title="（2）浮动"></a>（2）浮动</h4><h5 id="1）应用"><a href="#1）应用" class="headerlink" title="1）应用"></a>1）应用</h5><ul>
<li>文字环绕</li>
<li>水平排列</li>
</ul>
<h5 id="2）基本特点"><a href="#2）基本特点" class="headerlink" title="2）基本特点"></a>2）基本特点</h5><ul>
<li>修改float属性<ul>
<li>none 默认（常规流布局）</li>
<li>left 靠上靠左浮动（脱离文档流）</li>
<li>right 靠上考右浮动（脱离文档流）</li>
</ul>
</li>
<li>强制更改display属性为block（==块盒才能浮动==）</li>
<li>浮动元素的包含块与常规流一致（父元素内容盒）</li>
<li>浮动元素将脱离文档流（文档正常布局不会考虑脱离文档流的元素）</li>
</ul>
<h5 id="3）盒子尺寸"><a href="#3）盒子尺寸" class="headerlink" title="3）盒子尺寸"></a>3）盒子尺寸</h5><ul>
<li>width：auto 适应内容（不吸收剩余空间）</li>
<li>height：auto 适应内容（与常规流一致）</li>
<li>margin：auto 相当于设置0（不吸收剩余空间）</li>
<li>内边距、边框、外边距、百分比与常规流一致</li>
</ul>
<h5 id="4）盒子排列"><a href="#4）盒子排列" class="headerlink" title="4）盒子排列"></a>4）盒子排列</h5><ul>
<li>float：left 靠上靠左排列</li>
<li>float：right 靠上考右排列</li>
<li>与常规流块盒混排<ul>
<li>常规流盒子在前，浮动盒子会避开常规流盒子</li>
<li>浮动盒子在前，常规流盒子会无视浮动盒子</li>
</ul>
</li>
<li>与常规流行盒混排<ul>
<li>常规流盒子在前，浮动盒子会避开常规流盒子</li>
<li>浮动盒子在前，常规流盒子也会避开浮动盒子</li>
<li>如果文字直接放在块盒中，浏览器会自动生成匿名行盒（不可见）包裹文字</li>
<li><font color=red>内容一定只能放在行盒中（显式行盒、匿名行盒）</font></li>
</ul>
</li>
<li>浮动盒子不会发生外边距合并</li>
</ul>
<h5 id="5）高度坍塌"><a href="#5）高度坍塌" class="headerlink" title="5）高度坍塌"></a>5）高度坍塌</h5><ul>
<li>原因：常规流盒子在高度自适应时，计算不会考虑浮动盒子</li>
<li>清除浮动 clear属性（常规流盒子考虑前面的浮动盒子）</li>
<li>clearfix增加在浮动元素的父元素上解决高度坍塌<ul>
<li>none 默认不清楚</li>
<li>left 考虑左浮动</li>
<li>right 考虑有浮动</li>
<li>both 考虑所有浮动<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">  <span class="attribute">content</span>:<span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h5 id="6）布局规则"><a href="#6）布局规则" class="headerlink" title="6）布局规则"></a>6）布局规则</h5><ul>
<li>左浮动的盒子向上向左排列</li>
<li>右浮动的盒子向上向右排列</li>
<li>浮动盒子的顶边不得高于上一个盒子的顶边</li>
<li>若剩余空间无法放下浮动盒子，则该盒子向下移动，直到具备足够的空间收纳盒子，然后向左或向右移动</li>
</ul>
<hr>
<h4 id="（3）定位"><a href="#（3）定位" class="headerlink" title="（3）定位"></a>（3）定位</h4><h5 id="1）概念-1"><a href="#1）概念-1" class="headerlink" title="1）概念"></a>1）概念</h5><ul>
<li>一个元素，只要position的取值不是static，该元素是一个定位元素</li>
</ul>
<h5 id="2）基本特点-1"><a href="#2）基本特点-1" class="headerlink" title="2）基本特点"></a>2）基本特点</h5><ul>
<li>修改position属性<ul>
<li>static 默认（常规流布局）</li>
<li>relative 相对定位（不会脱离文档流）</li>
<li>absolute 绝对定位（脱离文档流）</li>
<li>fixed 固定定位（脱离文档流）</li>
</ul>
</li>
</ul>
<h5 id="3）相对定位"><a href="#3）相对定位" class="headerlink" title="3）相对定位"></a>3）相对定位</h5><ul>
<li>不会导致元素脱离文档流，只相对于原本位置进行偏移<ul>
<li>当left/right同时设置时，以left为准</li>
<li>当top与bottom同时设置时，以top为准</li>
</ul>
</li>
<li>与margin的区别<ul>
<li>margin是包含块的组成部分，会影响剩余空间而导致width发生变化</li>
<li>relative偏移不会影响自身width/height，也不会影响其它盒子的布局</li>
</ul>
</li>
<li>通常用作绝对定位的参考点</li>
</ul>
<h5 id="4）绝对定位"><a href="#4）绝对定位" class="headerlink" title="4）绝对定位"></a>4）绝对定位</h5><ul>
<li>脱离文档流</li>
<li>width/height为auto时，自适应适应内容</li>
<li>==包含块变化==：找祖先元素中最近的定位元素的<font color=ren>填充盒</font></li>
</ul>
<h5 id="5）固定定位"><a href="#5）固定定位" class="headerlink" title="5）固定定位"></a>5）固定定位</h5><ul>
<li>特点与绝对定位一样</li>
<li>==包含块变化==：视口</li>
</ul>
<hr>
<h3 id="3-块级格式化上下文"><a href="#3-块级格式化上下文" class="headerlink" title="3.块级格式化上下文"></a>3.块级格式化上下文</h3><h4 id="（1）概念"><a href="#（1）概念" class="headerlink" title="（1）概念"></a>（1）概念</h4><ul>
<li>BFC：block formatting context</li>
<li>它规定了在该区域中，常规流块盒的布局<ul>
<li>常规流块盒在水平方向上，必须撑满包含块</li>
<li>常规流块盒在包含块的垂直方向上依次摆放</li>
<li>常规流块盒若外边距无缝相邻，则进行外边距合并</li>
<li>常规流块盒的自动高度和摆放位置，无视浮动元素(绝对/固定定位元素)</li>
</ul>
</li>
</ul>
<h4 id="（2）独立的渲染区域"><a href="#（2）独立的渲染区域" class="headerlink" title="（2）独立的渲染区域"></a>（2）独立的渲染区域</h4><ul>
<li>BFC渲染区域：由某个HTML元素创建，以下元素会在其内部创建BFC区域<ul>
<li>浮动元素</li>
<li>绝对/固定定位元素</li>
<li>overflow值不等于visible的元素</li>
</ul>
</li>
<li>独立的：不同的BFC区域，他们进行渲染时互不干扰<ul>
<li>创建BFC的元素，隔绝了其内部与外部的联系</li>
<li>创建BFC的元素，它的自动高度需要计算浮动元素</li>
<li>创建BFC的元素，它的边框盒不会与浮动元素重叠（创建BFC的元素排列时会避开浮动元素）</li>
<li>创建BFC的元素，不会和子元素发生外边距合并（只有处于同一BFC中的元素才会发生外边距合并）</li>
</ul>
</li>
</ul>
<hr>
<h3 id="4-堆叠上下文"><a href="#4-堆叠上下文" class="headerlink" title="4.堆叠上下文"></a>4.堆叠上下文</h3><h4 id="（1）stack-context"><a href="#（1）stack-context" class="headerlink" title="（1）stack context"></a>（1）stack context</h4><ul>
<li>它是一块区域，这块区域由某个元素创建，规定了该区域中的内容在Z轴上排列的先后顺序</li>
<li>会创建堆叠上下文的元素<ul>
<li>HTML元素</li>
<li>z-index不为auto默认值的元素</li>
</ul>
</li>
</ul>
<h4 id="（2）同一个堆叠上下文中元素在Z轴上的排列顺序"><a href="#（2）同一个堆叠上下文中元素在Z轴上的排列顺序" class="headerlink" title="（2）同一个堆叠上下文中元素在Z轴上的排列顺序"></a>（2）同一个堆叠上下文中元素在Z轴上的排列顺序</h4><ul>
<li>1）创建堆叠上下文的元素的背景和边框</li>
<li>2）堆叠级别为负值的堆叠上下文</li>
<li>3）常规流非定位的块盒</li>
<li>4）非定位的浮动盒子</li>
<li>5）常规流非定位的行盒</li>
<li>6）z-index为auto的定位元素，以及z-index为0的堆叠上下文</li>
<li>7）堆叠级别为正值的堆叠上下文</li>
</ul>
<hr>
<h3 id="5-参考线"><a href="#5-参考线" class="headerlink" title="5.参考线"></a>5.参考线</h3><h4 id="（1）font-family"><a href="#（1）font-family" class="headerlink" title="（1）font-family"></a>（1）font-family</h4><ul>
<li>文字是通过一些文字制作软件制作出来的</li>
<li>文字在制作时就有几条参考线，不同类型文字参考线不同</li>
</ul>
<table>
<thead>
<tr>
<th align="center">参考线</th>
<th align="center">名称</th>
<th align="center">别称</th>
</tr>
</thead>
<tbody><tr>
<td align="center">虚拟区顶线</td>
<td align="center">top</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">顶线</td>
<td align="center">text top</td>
<td align="center">ascent</td>
</tr>
<tr>
<td align="center">上基线</td>
<td align="center">super</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">基线</td>
<td align="center">baseline</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">下基线</td>
<td align="center">sub</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">底线</td>
<td align="center">text bottom</td>
<td align="center">descent</td>
</tr>
<tr>
<td align="center">虚拟区底线</td>
<td align="center">bottom</td>
<td align="center">——</td>
</tr>
</tbody></table>
<h4 id="（2）font-size"><a href="#（2）font-size" class="headerlink" title="（2）font-size"></a>（2）font-size</h4><ul>
<li>设置的字体大小，是文字的相对大小（文字的相对大小：1000/2048/1024/）</li>
<li>文字顶线到底线的大小（text top到text bottom），是文字的实际大小（content-area内容区）</li>
<li>文字实际大小通常比设置大小要大</li>
</ul>
<h4 id="（3）line-height"><a href="#（3）line-height" class="headerlink" title="（3）line-height"></a>（3）line-height</h4><ul>
<li>顶线向上延伸一段空间，底线向下延伸一段空间，两段空间相等，该空间叫做gap（空隙）</li>
<li>top到bottom的距离是行高（virtual-area虚拟区）</li>
<li>line-height：<ul>
<li>设置为1（不太合理，文字实际大小通常比设置大小要大）</li>
<li>normal 使用默认值（0）</li>
</ul>
</li>
<li>文字一定出现在一行的正中间（错），取决于文字设计</li>
<li>content-area一定出现在virtual-area正中间（对）</li>
</ul>
<h4 id="（4）vertical-align"><a href="#（4）vertical-align" class="headerlink" title="（4）vertical-align"></a>（4）vertical-align</h4><ul>
<li>块盒内部有行盒子元素，也会生成参考线（font-family、font-size、line-height）</li>
<li><strong>预设值</strong></li>
</ul>
<table>
<thead>
<tr>
<th align="left">取值</th>
<th align="right">本元素</th>
<th align="center">对齐</th>
<th align="left">父元素</th>
</tr>
</thead>
<tbody><tr>
<td align="left">baseline：</td>
<td align="right">baseline</td>
<td align="center">——</td>
<td align="left">baseline</td>
</tr>
<tr>
<td align="left">super：</td>
<td align="right">baseline</td>
<td align="center">——</td>
<td align="left">super</td>
</tr>
<tr>
<td align="left">sub：</td>
<td align="right">baseline</td>
<td align="center">——</td>
<td align="left">sub</td>
</tr>
<tr>
<td align="left">text-top：</td>
<td align="right">top</td>
<td align="center">——</td>
<td align="left">text-top</td>
</tr>
<tr>
<td align="left">text-bottom：</td>
<td align="right">bottom</td>
<td align="center">——</td>
<td align="left">text-bottom</td>
</tr>
<tr>
<td align="left">top：</td>
<td align="right">top</td>
<td align="center">——</td>
<td align="left">该行最高text-top</td>
</tr>
<tr>
<td align="left">bottom：</td>
<td align="right">bottom</td>
<td align="center">——</td>
<td align="left">该行最低text-bottom</td>
</tr>
<tr>
<td align="left">middle：</td>
<td align="right">中线</td>
<td align="center">——</td>
<td align="left">X字母的一半位置</td>
</tr>
</tbody></table>
<ul>
<li><strong>数值</strong>：相对于基线的偏移量，上为正数，下为负数</li>
<li><strong>百分比</strong>： 相对于基线的偏移量（取值相对于自身virtual-area的高度）</li>
</ul>
<h4 id="（5）line-box"><a href="#（5）line-box" class="headerlink" title="（5）line-box"></a>（5）line-box</h4><ul>
<li>行框：承载文字内容的必要条件</li>
<li>确定元素的自动高度</li>
<li>==不生成行框==：<ul>
<li>某元素内没有任何行盒</li>
<li>某元素字体大小为0</li>
</ul>
</li>
</ul>
<h4 id="（6）可替换元素的参考线"><a href="#（6）可替换元素的参考线" class="headerlink" title="（6）可替换元素的参考线"></a>（6）可替换元素的参考线</h4><ul>
<li>图片的基线：下外边距位置</li>
<li>表单元素的基线：内容的底边</li>
</ul>
<h4 id="（7）行块盒的参考线"><a href="#（7）行块盒的参考线" class="headerlink" title="（7）行块盒的参考线"></a>（7）行块盒的参考线</h4><ul>
<li>最后一行有行盒：最后一行的基线</li>
<li>最后一行无行盒：下外边距位置</li>
</ul>
<hr>
<h2 id="（五）文字"><a href="#（五）文字" class="headerlink" title="（五）文字"></a>（五）文字</h2><h3 id="1-自定义字体"><a href="#1-自定义字体" class="headerlink" title="1.自定义字体"></a>1.自定义字体</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;style&gt;</span><br><span class="line">    <span class="keyword">@font-face</span>&#123;</span><br><span class="line">      <span class="attribute">font-family</span>: <span class="string">&quot;hu&quot;</span>;</span><br><span class="line">      <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&quot;./font/造字工房映力黑规体.otf&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">p</span>&#123;</span><br><span class="line">      <span class="attribute">font-family</span>: <span class="string">&quot;hu&quot;</span>;</span><br><span class="line">      <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">  &lt;<span class="selector-tag">p</span>&gt;永夜将至，吾于今开始守候！&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">body</span>&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="2-阿里巴巴字体图标库"><a href="#2-阿里巴巴字体图标库" class="headerlink" title="2.阿里巴巴字体图标库"></a>2.阿里巴巴字体图标库</h3><h4 id="（1）font-class"><a href="#（1）font-class" class="headerlink" title="（1）font class"></a>（1）font class</h4><ul>
<li><p>在线</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;link rel=&quot;stylesheet&quot; href=&quot;//at<span class="selector-class">.alicdn</span><span class="selector-class">.com</span>/t/font_1352461_0pmps1ixdezd<span class="selector-class">.css</span>&quot;&gt;</span><br><span class="line">  &lt;style&gt;</span><br><span class="line">    <span class="selector-class">.iconfont</span>&#123;</span><br><span class="line">      <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">color</span>: gold;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">  &lt;<span class="selector-tag">i</span> class=&quot;iconfont <span class="attribute">icon</span>-RectangleCopy6&quot;&gt;&lt;/<span class="selector-tag">i</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">body</span>&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>离线</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;link rel=&quot;stylesheet&quot; href=&quot;./<span class="attribute">font</span>/iconfont<span class="selector-class">.css</span>&quot;&gt;</span><br><span class="line">  &lt;style&gt;</span><br><span class="line">    <span class="selector-class">.iconfont</span>&#123;</span><br><span class="line">      <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">color</span>: gold;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">  &lt;<span class="selector-tag">i</span> class=&quot;iconfont <span class="attribute">icon</span>-RectangleCopy6&quot;&gt;&lt;/<span class="selector-tag">i</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">body</span>&gt;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="（2）Unicode"><a href="#（2）Unicode" class="headerlink" title="（2）Unicode"></a>（2）Unicode</h4><ul>
<li><p>在线</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">    <span class="keyword">@font-face</span> &#123;</span><br><span class="line">      <span class="attribute">font-family</span>: <span class="string">&#x27;iconfont&#x27;</span>;  <span class="comment">/* project id 1352461 */</span></span><br><span class="line">      <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.eot&#x27;</span>);</span><br><span class="line">      <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.eot?#iefix&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;embedded-opentype&#x27;</span>),</span><br><span class="line">      <span class="built_in">url</span>(<span class="string">&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.woff2&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff2&#x27;</span>),</span><br><span class="line">      <span class="built_in">url</span>(<span class="string">&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.woff&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>),</span><br><span class="line">      <span class="built_in">url</span>(<span class="string">&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.ttf&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>),</span><br><span class="line">      <span class="built_in">url</span>(<span class="string">&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.svg#iconfont&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;svg&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">i</span>&#123;</span><br><span class="line">      <span class="attribute">font-family</span>: <span class="string">&quot;iconfont&quot;</span>;</span><br><span class="line">      <span class="attribute">font-style</span>: normal;</span><br><span class="line">      <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">color</span>: black;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">  &lt;<span class="selector-tag">i</span>&gt;&amp;<span class="selector-id">#xe6a9</span>;&lt;/<span class="selector-tag">i</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">body</span>&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>离线</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line"> &lt;style&gt;</span><br><span class="line">    <span class="keyword">@font-face</span> &#123;</span><br><span class="line">      <span class="attribute">font-family</span>: <span class="string">&#x27;iconfont&#x27;</span>;  <span class="comment">/* project id 1352461 */</span></span><br><span class="line">      <span class="comment">/* src: url(&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.eot&#x27;);</span></span><br><span class="line"><span class="comment">      src: url(&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.eot?#iefix&#x27;) format(&#x27;embedded-opentype&#x27;),</span></span><br><span class="line"><span class="comment">      url(&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.woff2&#x27;) format(&#x27;woff2&#x27;),</span></span><br><span class="line"><span class="comment">      url(&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.woff&#x27;) format(&#x27;woff&#x27;),</span></span><br><span class="line"><span class="comment">      url(&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.ttf&#x27;) format(&#x27;truetype&#x27;),</span></span><br><span class="line"><span class="comment">      url(&#x27;//at.alicdn.com/t/font_1352461_0pmps1ixdezd.svg#iconfont&#x27;) format(&#x27;svg&#x27;); */</span></span><br><span class="line"></span><br><span class="line">      <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;./font_unicode/iconfont.eot&#x27;</span>);</span><br><span class="line">      <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;./font_unicode/iconfont.eot?#iefix&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;embedded-opentype&#x27;</span>),</span><br><span class="line">      <span class="built_in">url</span>(<span class="string">&#x27;./font_unicode/iconfont.woff2&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff2&#x27;</span>),</span><br><span class="line">      <span class="built_in">url</span>(<span class="string">&#x27;./font_unicode/iconfont.woff&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>),</span><br><span class="line">      <span class="built_in">url</span>(<span class="string">&#x27;./font_unicode/iconfont.ttf&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>),</span><br><span class="line">      <span class="built_in">url</span>(<span class="string">&#x27;./font_unicode/iconfont.svg#iconfont&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;svg&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">i</span>&#123;</span><br><span class="line">      <span class="attribute">font-family</span>: <span class="string">&quot;iconfont&quot;</span>;</span><br><span class="line">      <span class="attribute">font-style</span>: normal;</span><br><span class="line">      <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">color</span>: black;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">  &lt;<span class="selector-tag">i</span>&gt;&amp;<span class="selector-id">#xe6a1</span>;&lt;/<span class="selector-tag">i</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">body</span>&gt;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="3-单行文本溢出固定处理方式"><a href="#3-单行文本溢出固定处理方式" class="headerlink" title="3.单行文本溢出固定处理方式"></a>3.单行文本溢出固定处理方式</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-行高"><a href="#4-行高" class="headerlink" title="4.行高"></a>4.行高</h3><ul>
<li>可以被继承，一般统一设置</li>
<li>固定值（px）固定不好</li>
<li>相对值（em）先计算像素值，再继承</li>
<li>百分比（%）相当于em</li>
<li>倍数（n）先继承，再计算</li>
</ul>
<hr>
<h2 id="（六）背景"><a href="#（六）背景" class="headerlink" title="（六）背景"></a>（六）背景</h2><h3 id="1-背景"><a href="#1-背景" class="headerlink" title="1.背景"></a>1.背景</h3><h4 id="（1）与img区别"><a href="#（1）与img区别" class="headerlink" title="（1）与img区别"></a>（1）与img区别</h4><ul>
<li>img属于HTML范畴，属于网页内容结构</li>
<li>background属于css范畴，仅用于美化装饰</li>
</ul>
<h4 id="（2）应用"><a href="#（2）应用" class="headerlink" title="（2）应用"></a>（2）应用</h4><ul>
<li>background-color背景色</li>
<li>background-image背景图片</li>
<li>background-repeat背景重复</li>
<li>background-size背景尺寸<ul>
<li>auto 图片默认大小</li>
<li>contain 图片比例不变，并且完整显示</li>
<li>cover 图片比例不变， 并且撑满盒子</li>
<li>数值/百分比</li>
</ul>
</li>
<li>background-position背景位置<ul>
<li>left/bottom/right/top预设值</li>
<li>数值/百分比</li>
<li><font color=red>雪碧图</font></li>
</ul>
</li>
<li>background-attachment背景图固定<ul>
<li>fixed 相对于视口固定</li>
</ul>
</li>
<li>背景图与背景色混用（背景图在上层）</li>
</ul>
<hr>
<h3 id="2-body背景"><a href="#2-body背景" class="headerlink" title="2.body背景"></a>2.body背景</h3><h5 id="（1）画布-canvas"><a href="#（1）画布-canvas" class="headerlink" title="（1）画布 canvas"></a>（1）画布 canvas</h5><ul>
<li>一块区域</li>
<li>最小宽度为视口宽度</li>
<li>最小高度为视口高度</li>
</ul>
<h5 id="（2）背景颜色"><a href="#（2）背景颜色" class="headerlink" title="（2）背景颜色"></a>（2）背景颜色</h5><ul>
<li><p>HTML元素背景 </p>
<ul>
<li>覆盖画布（普通元素覆盖边框盒）</li>
</ul>
</li>
<li><p>body元素背景</p>
<ul>
<li>HTML元素有背景，body元素背景覆盖边框盒</li>
<li>HTML元素无背景，body元素背景覆盖画布</li>
</ul>
</li>
</ul>
<h5 id="（3）背景图片"><a href="#（3）背景图片" class="headerlink" title="（3）背景图片"></a>（3）背景图片</h5><ul>
<li>覆盖区域与背景颜色一致</li>
<li>画布背景图的宽度百分比相对于视口（画布背景色是相对于画布）</li>
<li>画布背景图的高度百分比相对于网页（HTML元素高度）</li>
<li>画布背景图的水平位置相对于视口</li>
<li>画布背景图的垂直位置相对于网页</li>
</ul>
<hr>
<h2 id="（七）兼容性"><a href="#（七）兼容性" class="headerlink" title="（七）兼容性"></a>（七）兼容性</h2><h3 id="1-主浏览器"><a href="#1-主浏览器" class="headerlink" title="1.主浏览器"></a>1.主浏览器</h3><ul>
<li>shell：外壳</li>
<li>core：内核</li>
<li><strong>主流浏览器</strong>：<ul>
<li><strong>IE</strong> &gt; trident</li>
<li><strong>Firefox</strong> &gt; Gecko</li>
<li><strong>Chrome</strong> &gt; Webkit / Blink</li>
<li><strong>Safari</strong> &gt; webkit</li>
<li><strong>Opera</strong> &gt; presto / Blink</li>
</ul>
</li>
</ul>
<h3 id="2-兼容性原因"><a href="#2-兼容性原因" class="headerlink" title="2.兼容性原因"></a>2.兼容性原因</h3><ul>
<li><p>市场竞争</p>
<ul>
<li>标准制定发布缓慢</li>
<li>各浏览器快速更新，增加新东西</li>
</ul>
</li>
<li><p>标准版本的变化</p>
<ul>
<li>同一浏览器的不同版本支持不一</li>
</ul>
</li>
</ul>
<h3 id="3-厂商前缀"><a href="#3-厂商前缀" class="headerlink" title="3.厂商前缀"></a>3.厂商前缀</h3><ul>
<li>IE：-ms-</li>
<li>CHrome：-webkit-</li>
<li>Opera：-o-</li>
<li>Firefox: -moz-</li>
</ul>
<h3 id="4-多背景图"><a href="#4-多背景图" class="headerlink" title="4.多背景图"></a>4.多背景图</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">  <span class="attribute">background</span>-<span class="selector-tag">img</span>：-webkit-image-set(url() <span class="number">1</span>x, url() <span class="number">2</span>x);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-css-hack"><a href="#5-css-hack" class="headerlink" title="5.css hack"></a>5.css hack</h3><h4 id="（1）特殊符号（主要针对IE）"><a href="#（1）特殊符号（主要针对IE）" class="headerlink" title="（1）特殊符号（主要针对IE）"></a>（1）特殊符号（主要针对IE）</h4><ul>
<li>*属性：兼容IE5、IE6、IE7</li>
<li>_属性：兼容IE5~IE6</li>
<li>属性值\9：兼容IE5~IE11</li>
<li>属性值\0：兼容IE8~IE11</li>
<li>属性值\9\0：兼容IE9~IE10</li>
</ul>
<h4 id="（2）条件判断（主要针对IE）"><a href="#（2）条件判断（主要针对IE）" class="headerlink" title="（2）条件判断（主要针对IE）"></a>（2）条件判断（主要针对IE）</h4><ul>
<li>识别注释中的特殊字符<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--[if IE]&gt; </span></span><br><span class="line"><span class="comment">  这是IE浏览器</span></span><br><span class="line"><span class="comment">  &lt;link href=&quot;&quot;&gt;</span></span><br><span class="line"><span class="comment">&lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--[if !(IE)]&gt;&lt;--&gt;</span> </span><br><span class="line">  这是非IE浏览器</span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--&lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--[if lt IE8]&gt; </span></span><br><span class="line"><span class="comment">  这是低于IE8的浏览器</span></span><br><span class="line"><span class="comment">  &lt;link href=&quot;&quot;&gt;</span></span><br><span class="line"><span class="comment">&lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="（3）解决兼容的思路"><a href="#（3）解决兼容的思路" class="headerlink" title="（3）解决兼容的思路"></a>（3）解决兼容的思路</h4><ul>
<li><p>渐近增强</p>
<ul>
<li>先适应大部分浏览器</li>
<li>再针对新版本浏览器加入新样式</li>
</ul>
</li>
<li><p>优雅降级</p>
<ul>
<li>先制作完整的功能</li>
<li>再针对低版本的浏览器做特殊处理</li>
</ul>
</li>
</ul>
<h4 id="（4）caniuse"><a href="#（4）caniuse" class="headerlink" title="（4）caniuse"></a>（4）caniuse</h4><ul>
<li><a target="_blank" rel="noopener" href="https://www.caniuse.com/">兼容性查询</a></li>
</ul>
<hr>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2017/11/15/CSS2/" data-id="ckzbe3k6v0000swf60hsk4w33"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/css-css2/" rel="tag">css css2</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-HTML" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2017/11/01/HTML/"
    >HTML 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2017/11/01/HTML/" class="article-date">
  <time datetime="2017-10-31T16:00:00.000Z" itemprop="datePublished">2017-11-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h3 id="1-web"><a href="#1-web" class="headerlink" title="1. web"></a>1. web</h3><ul>
<li>互联网</li>
</ul>
<h3 id="2-w3c"><a href="#2-w3c" class="headerlink" title="2. w3c"></a>2. w3c</h3><ul>
<li>万维网联盟（非营利性组织）</li>
<li>为互联网提供各种标准</li>
</ul>
<h3 id="3-XML"><a href="#3-XML" class="headerlink" title="3. XML"></a>3. XML</h3><ul>
<li>可拓展的标记语言： extension markup language</li>
<li>用户定义文档结构的</li>
</ul>
<h3 id="4-HTML"><a href="#4-HTML" class="headerlink" title="4. HTML"></a>4. HTML</h3><ul>
<li>超文本标记言语：Hyper Text markup language</li>
<li>html is the language for describing the structure of Web pages!</li>
<li>用于描述页面结构的</li>
<li>HTML5：2014年发布</li>
<li>XHTML：完全符合XML的规范（已被HTML5取代）</li>
</ul>
<h3 id="5-MDN"><a href="#5-MDN" class="headerlink" title="5. MDN"></a>5. MDN</h3><ul>
<li>Mozilla Development Network</li>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/">开发者社区</a></li>
</ul>
<h3 id="6-CSS"><a href="#6-CSS" class="headerlink" title="6. CSS"></a>6. CSS</h3><ul>
<li>层叠样式表：cascading style sheet</li>
<li>css is the language for describing the presentation of Web pages!</li>
<li>用于描述页面样式的</li>
<li>CSS3：持续制定中（兼容性比较差）</li>
</ul>
<h3 id="7-browser"><a href="#7-browser" class="headerlink" title="7. browser"></a>7. browser</h3><ul>
<li>浏览器<ul>
<li>shell：外壳</li>
<li>core：内核<ul>
<li>js执行引擎</li>
<li>渲染引擎</li>
</ul>
</li>
</ul>
</li>
<li>主流浏览器<ul>
<li>IE：Trident</li>
<li>Firfox：Gecko</li>
<li>Chrome：Webkit / Blink</li>
<li>Safari：Webkit</li>
<li>Opera：Presto / Blink</li>
</ul>
</li>
</ul>
<h3 id="8-element"><a href="#8-element" class="headerlink" title="8. element"></a>8. element</h3><ul>
<li><p>元素：起始标记 + 结束标记 + 元素内容 + 元素属性</p>
</li>
<li><p>空元素</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- html5标准格式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- xhtml标准 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span> </span><br></pre></td></tr></table></figure></li>
<li><p>HTML文档</p>
<ul>
<li>文档声明：告诉浏览器当前文档使用的HTML标准</li>
<li><font color=red>文档声明不是元素</font><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>自然语言</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- html5标准 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;cmn-hans&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- xhtml标准 --&gt;</span>  </span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>文档头</p>
<ul>
<li>文档头不参与显示<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span> 元数据 字符编码</span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span> 网页标题</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h3 id="9-SEO"><a href="#9-SEO" class="headerlink" title="9. SEO"></a>9. SEO</h3><ul>
<li>搜索引擎<ul>
<li>百度</li>
<li>搜狗</li>
<li>360</li>
<li>必应（Bing）</li>
<li>谷歌（Google）</li>
</ul>
</li>
</ul>
<h3 id="10-什么是语义化？"><a href="#10-什么是语义化？" class="headerlink" title="10.什么是语义化？"></a>10.什么是语义化？</h3><ul>
<li>每一个html元素都有具体的含义</li>
<li><font color=red>元素本身与展示效果无关</font><ul>
<li>元素的展示效果应由css决定</li>
<li>没有css的元素无法显示（浏览器带有默认的css样式）</li>
</ul>
</li>
<li><font color=red>选择使用什么元素应由元素内容的含义决定</font></li>
</ul>
<h3 id="11-为什么需要语义化"><a href="#11-为什么需要语义化" class="headerlink" title="11.为什么需要语义化"></a>11.为什么需要语义化</h3><ul>
<li>为了搜索引擎优化</li>
<li>为了浏览器理解网页</li>
<li>对阅读模式、语音模式更友好  </li>
</ul>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2017/11/01/HTML/" data-id="ckzbe3k760006swf6d6jq2cb7"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/html/" rel="tag">html</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
  </article>
  

  
  <nav class="page-nav">
    
    <a class="extend prev" rel="prev" href="/blog/page/2/">上一页</a><a class="page-number" href="/blog/">1</a><a class="page-number" href="/blog/page/2/">2</a><span class="page-number current">3</span>
  </nav>
  
</section>
</div>

      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2020-2022
        Huafu Li
      </li>
      <li>
        
          Powered by
        
        
        <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <ul class="list-inline">
  <li>PV:<span id="busuanzi_value_page_pv"></span></li>
  <li>UV:<span id="busuanzi_value_site_uv"></span></li>
</ul>
        
      </li>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
    <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
    
      <aside class="sidebar">
        
        <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/blog/"><img src="/blog/hu.png" alt="虎虎生辉"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/archives">目录</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/about">关于</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/pictures">相册</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/blog/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
      </aside>
      <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/alipay.png">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/wechat.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
      
<script src="/blog/js/jquery-2.0.3.min.js"></script>


<script src="/blog/js/jquery.justifiedGallery.min.js"></script>


<script src="/blog/js/lazyload.min.js"></script>


<script src="/blog/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/blog/fancybox/jquery.fancybox.min.js"></script>





<script>
  var ayerConfig = {
    mathjax: false
  }
</script>


<script src="/blog/js/ayer.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
  
  

  </div>
</body>

</html>